Skip to content
HyperUI

No results found.

Back to neobrutalism components

Textareas

Neobrutalism-style textarea components built with Tailwind CSS. Featuring thick borders, hard shadows, and resizable layouts. Perfect for comments, messages, and long-form input with a retro, neobrutalist aesthetic.

3/3 Dark Mode Updated: May 21, 2026

Base

markmead

<label for="Notes" class="text-black">
  <span class="text-sm font-semibold"> Notes </span>

  <textarea
    id="Notes"
    class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
    rows="4"
  ></textarea>
</label>

Plugins: @tailwindcss/forms

Base (Dark)

markmead

<label for="Notes" class="text-black dark:text-white">
  <span class="text-sm font-semibold"> Notes </span>

  <textarea
    id="Notes"
    class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-yellow-600"
    rows="4"
  ></textarea>
</label>

Plugins: @tailwindcss/forms

Actions inside

markmead

<label for="Notes" class="text-black">
  <span class="text-sm font-semibold"> Notes </span>

  <div
    class="relative mt-0.5 overflow-hidden border-2 border-black shadow-[4px_4px_0_0] shadow-black focus-within:ring-2 focus-within:ring-yellow-300"
  >
    <textarea
      id="Notes"
      class="w-full resize-none border-0 bg-white focus:ring-0 sm:text-sm"
      rows="4"
    ></textarea>

    <div class="flex items-center justify-end gap-3 border-t-2 border-black p-3">
      <button
        type="button"
        class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Clear
      </button>

      <button
        type="button"
        class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Save
      </button>
    </div>
  </div>
</label>

Plugins: @tailwindcss/forms

Actions inside (Dark)

markmead

<label for="Notes" class="text-black dark:text-white">
  <span class="text-sm font-semibold"> Notes </span>

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

    <div
      class="flex items-center justify-end gap-3 border-t-2 border-black p-3 dark:border-white"
    >
      <button
        type="button"
        class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
      >
        Clear
      </button>

      <button
        type="button"
        class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:bg-yellow-700 dark:text-white dark:shadow-white dark:hover:bg-yellow-500 dark:focus:bg-yellow-700 dark:focus:ring-yellow-600"
      >
        Save
      </button>
    </div>
  </div>
</label>

Plugins: @tailwindcss/forms

Actions outside

markmead

<div>
  <label for="Notes" class="text-black">
    <span class="text-sm font-semibold"> Notes </span>

    <textarea
      id="Notes"
      class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
      rows="4"
    ></textarea>
  </label>

  <div class="mt-3 flex items-center justify-end gap-3">
    <button
      type="button"
      class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Clear
    </button>

    <button
      type="button"
      class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Save
    </button>
  </div>
</div>

Plugins: @tailwindcss/forms

Actions outside (Dark)

markmead

<div>
  <label for="Notes" class="text-black dark:text-white">
    <span class="text-sm font-semibold"> Notes </span>

    <textarea
      id="Notes"
      class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-yellow-600"
      rows="4"
    ></textarea>
  </label>

  <div class="mt-3 flex items-center justify-end gap-3">
    <button
      type="button"
      class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600"
    >
      Clear
    </button>

    <button
      type="button"
      class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:bg-yellow-700 dark:text-white dark:shadow-white dark:hover:bg-yellow-500 dark:focus:bg-yellow-700 dark:focus:ring-yellow-600"
    >
      Save
    </button>
  </div>
</div>

Plugins: @tailwindcss/forms

Related components

View all neobrutalism components