Textarea

<div class="mx-auto max-w-xs">
  <textarea
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
    rows="3"
    placeholder="Leave a message"
  ></textarea>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="5" class="mb-1 block text-sm font-medium text-gray-700">Message</label>
    <textarea
      id="example1"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
      rows="3"
      placeholder="Leave a message"
    ></textarea>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example2" class="mb-1 block text-sm font-medium text-gray-700">Message</label>
    <textarea
      id="example2"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
      rows="3"
      placeholder="Leave a message"
    ></textarea>
    <p class="tex-sm mt-1 text-gray-500">This is a help message.</p>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label
      for="example3"
      class="mb-1 block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']"
      >Description</label
    >
    <textarea
      id="example3"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
      rows="3"
      placeholder="Enter a description..."
    ></textarea>
    <p class="tex-sm mt-1 text-red-500">This is a error message.</p>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <textarea
    id="example4"
    disabled
    class="block w-full rounded-md border-gray-300 text-gray-500 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
    rows="3"
    placeholder="Enter a description..."
  ></textarea>
</div>

<div class="mx-auto max-w-xs">
  <div
    class="relative overflow-hidden rounded-md border border-gray-300 shadow-sm focus-within:border-primary-300 focus-within:ring focus-within:ring-primary-200 focus-within:ring-opacity-50"
  >
    <textarea
      id="example5"
      class="block w-full border-0 focus:border-0 focus:ring-0"
      rows="3"
      placeholder="Leave a message"
    ></textarea>
    <div class="flex w-full items-center justify-between bg-white p-2">
      <div class="flex space-x-1">
        <button class="rounded p-1.5 text-secondary-400 hover:bg-primary-50 hover:text-primary-400">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="h-5 w-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
            />
          </svg>
        </button>
        <button class="rounded p-1.5 text-secondary-400 hover:bg-primary-50 hover:text-primary-400">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="h-5 w-5"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z"
            />
          </svg>
        </button>
      </div>
      <button
        type="button"
        class="rounded border border-primary-500 bg-primary-500 px-2 py-1.5 text-center text-xs font-medium text-white shadow-sm transition-all hover:bg-primary-700 focus:ring focus:ring-primary-100"
      >
        Comment
      </button>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs space-y-5">
  <textarea
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
    rows="3"
    placeholder="Default"
  ></textarea>
  <textarea
    class="block w-full border-0 border-b-2 border-gray-200 focus:border-primary-500 focus:ring-0"
    rows="3"
    placeholder="Underline"
  ></textarea>
  <textarea
    class="block w-full rounded-md border-transparent bg-gray-100 focus:border-primary-300 focus:bg-white focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50"
    rows="3"
    placeholder="Fill"
  ></textarea>
</div>