Tailwind CSS 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="mt-1 text-sm 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-red-300 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500" rows="3" placeholder="Enter a description..."></textarea>
    <p class="mt-1 text-sm 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>