Myna UI

Textareas

<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-1">
  <label for="basic" class="text-xs font-medium text-gray-500"> Write your review: </label>
  <textarea
    rows="4"
    id="basic"
    placeholder="Enter your review here"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"></textarea>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-1">
  <label for="disabled" class="text-xs font-medium text-gray-500"> Write your review: </label>
  <textarea
    rows="4"
    disabled
    id="disabled"
    placeholder="Enter your review here"
    class="block w-full rounded-md border-gray-200 text-sm transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"></textarea>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="flex items-start space-x-3">
  <div
    class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/2?square" />
  </div>
  <div
    class="w-full overflow-hidden rounded-md border border-gray-200 transition focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
    <label for="editor" class="sr-only">Write your comment:</label>
    <textarea
      rows="4"
      id="editor"
      placeholder="Write a comment"
      class="block w-full border-0 bg-transparent text-sm transition focus:border-blue-600 focus:ring-0 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"></textarea>
    <div class="flex items-center justify-between p-2">
      <div class="flex space-x-1">
        <button
          type="button"
          class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
          <svg class="h-4 w-4 shrink-0 stroke-gray-500" viewBox="0 0 256 256">
            <path
              d="M96,176l95.8-92.2a28,28,0,0,0-39.6-39.6L54.1,142.1a47.9,47.9,0,0,0,67.8,67.8L204,128"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></path>
          </svg>
        </button>
        <button
          type="button"
          class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
          <svg class="h-4 w-4 shrink-0 stroke-gray-500" viewBox="0 0 256 256">
            <rect
              x="88"
              y="24"
              width="80"
              height="136"
              rx="40"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></rect>
            <path
              d="M208,120a80,80,0,0,1-160,0"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></path>
            <line
              x1="128"
              y1="200"
              x2="128"
              y2="232"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></line>
          </svg>
        </button>
        <button
          type="button"
          class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
          <svg class="h-4 w-4 shrink-0 fill-gray-500 stroke-gray-500" viewBox="0 0 256 256">
            <circle
              cx="128"
              cy="128"
              r="96"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></circle>
            <circle cx="92" cy="108" r="16"></circle>
            <circle cx="164" cy="108" r="16"></circle>
            <path
              d="M169.6,152a48.1,48.1,0,0,1-83.2,0"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="24"></path>
          </svg>
        </button>
      </div>
      <button
        type="submit"
        class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-3 py-1.5 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
        Comment
      </button>
    </div>
  </div>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div
  class="w-full overflow-hidden rounded-md border border-gray-200 transition focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600">
  <label for="editor" class="sr-only">Write your comment:</label>
  <textarea
    rows="4"
    id="editor"
    placeholder="Write a comment"
    class="block w-full border-0 bg-transparent text-sm transition focus:border-blue-600 focus:ring-0 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75"></textarea>
  <div class="flex items-center justify-between p-2">
    <div class="flex space-x-1">
      <button
        type="button"
        class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
        <svg class="h-4 w-4 shrink-0 stroke-gray-500" viewBox="0 0 256 256">
          <path
            d="M96,176l95.8-92.2a28,28,0,0,0-39.6-39.6L54.1,142.1a47.9,47.9,0,0,0,67.8,67.8L204,128"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
        </svg>
      </button>
      <button
        type="button"
        class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
        <svg class="h-4 w-4 shrink-0 stroke-gray-500" viewBox="0 0 256 256">
          <rect
            x="88"
            y="24"
            width="80"
            height="136"
            rx="40"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></rect>
          <path
            d="M208,120a80,80,0,0,1-160,0"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
          <line
            x1="128"
            y1="200"
            x2="128"
            y2="232"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></line>
        </svg>
      </button>
      <button
        type="button"
        class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center rounded bg-white px-2 py-2 text-xs font-medium text-gray-800 transition hover:bg-gray-100 focus:border-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-300">
        <svg class="h-4 w-4 shrink-0 fill-gray-500 stroke-gray-500" viewBox="0 0 256 256">
          <circle
            cx="128"
            cy="128"
            r="96"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></circle>
          <circle cx="92" cy="108" r="16"></circle>
          <circle cx="164" cy="108" r="16"></circle>
          <path
            d="M169.6,152a48.1,48.1,0,0,1-83.2,0"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="24"></path>
        </svg>
      </button>
    </div>
    <button
      type="submit"
      class="inline-flex w-auto cursor-pointer select-none appearance-none items-center justify-center space-x-1 rounded border border-blue-700 bg-blue-700 px-3 py-1.5 text-xs font-medium text-white transition hover:border-blue-800 hover:bg-blue-800 focus:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300">
      Comment
    </button>
  </div>
</div>
<!-- Needs TailwindCSS Forms Plugin github.com/tailwindlabs/tailwindcss-forms -->
<div class="w-full space-y-1">
  <label for="error" class="text-xs font-medium text-gray-500"> Write your review: </label>
  <textarea
    rows="4"
    id="error"
    placeholder="Enter your review here"
    class="block w-full rounded-md border-red-600 text-sm ring-1 ring-red-600 transition focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
I don't like this...  
  </textarea>
  <p class="text-xs font-medium text-red-600">We don't accept negative reviews</p>
</div>

We don't accept negative reviews