Back to application components
Textareas
Textarea components for forms and user input fields, ideal for web applications, contact forms, comment sections, and feedback forms.
Updated: N/ANo commit information available.
<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
<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
<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