Skip to content
HyperUI

No results found.

Back to application components

Textareas

Textarea components for forms and user input fields, ideal for web applications, contact forms, comment sections, and feedback forms.

3/3 Dark Mode Updated: N/ANo commit information available.

Base

markmead

<label for="Notes">
  <span class="text-sm font-medium text-gray-700"> Notes </span>

  <textarea
    id="Notes"
    class="mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm"
    rows="4"
  ></textarea>
</label>

Plugins: @tailwindcss/forms

Base (Dark)

markmead

<label for="Notes">
  <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Notes </span>

  <textarea
    id="Notes"
    class="mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
    rows="4"
  ></textarea>
</label>

Plugins: @tailwindcss/forms

Actions inside

markmead

<div>
  <label for="Notes">
    <span class="text-sm font-medium text-gray-700"> Notes </span>

    <div
      class="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600"
    >
      <textarea
        id="Notes"
        class="w-full resize-none border-none focus:ring-0 sm:text-sm"
        rows="4"
      ></textarea>

      <div class="flex items-center justify-end gap-2 p-1.5">
        <button
          type="button"
          class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
        >
          Clear
        </button>

        <button
          type="button"
          class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
        >
          Save
        </button>
      </div>
    </div>
  </label>
</div>

Plugins: @tailwindcss/forms

Actions inside (Dark)

markmead

<div>
  <label for="Notes">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Notes </span>

    <div
      class="relative mt-0.5 overflow-hidden rounded border border-gray-300 shadow-sm focus-within:ring focus-within:ring-blue-600 dark:border-gray-600"
    >
      <textarea
        id="Notes"
        class="w-full resize-none border-none focus:ring-0 sm:text-sm dark:bg-gray-900 dark:text-white"
        rows="4"
      ></textarea>

      <div class="flex items-center justify-end gap-2 p-1.5">
        <button
          type="button"
          class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
        >
          Clear
        </button>

        <button
          type="button"
          class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700"
        >
          Save
        </button>
      </div>
    </div>
  </label>
</div>

Plugins: @tailwindcss/forms

Actions outside

markmead

<div>
  <label for="Notes">
    <span class="text-sm font-medium text-gray-700"> Notes </span>

    <textarea
      id="Notes"
      class="mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm"
      rows="4"
    ></textarea>
  </label>

  <div class="mt-1.5 flex items-center justify-end gap-2">
    <button
      type="button"
      class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900"
    >
      Clear
    </button>

    <button
      type="button"
      class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100"
    >
      Save
    </button>
  </div>
</div>

Plugins: @tailwindcss/forms

Actions outside (Dark)

markmead

<div>
  <label for="Notes">
    <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Notes </span>

    <textarea
      id="Notes"
      class="mt-0.5 w-full resize-none rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
      rows="4"
    ></textarea>
  </label>

  <div class="mt-1.5 flex items-center justify-end gap-2">
    <button
      type="button"
      class="rounded border border-transparent px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-white"
    >
      Clear
    </button>

    <button
      type="button"
      class="rounded border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-900 shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-white dark:hover:bg-gray-700"
    >
      Save
    </button>
  </div>
</div>

Plugins: @tailwindcss/forms

Related components

View all application components