Components
Tailwind CSS Text Areas - Madhuranjan UI
Explore a collection of text area components built with Tailwind CSS. Each component is crafted for a specific usec ase from simple text input to more advanced layouts with avatars and action icons ensuring a seamless, theme-aware experience.
Simple Text Area
A basic text area for capturing multiline text input.
1<div class="w-full max-w-md">
2 <label
3 for="message"
4 class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300"
5 >
6 Your Message
7 </label>
8 <textarea
9 id="message"
10 rows="4"Comment Text Area
A dedicated text area optimized for writing comments with a clean interface.
1<div class="max-w-lg mx-auto p-4 bg-white dark:bg-black shadow rounded">
2 <label for="comment" class="block text-gray-900 dark:text-gray-100 text-sm font-medium mb-2">
3 Your Comment
4 </label>
5 <textarea
6 id="comment"
7 rows="5"
8 class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
9 placeholder="Write your comment here..."
10 ></textarea>Colored Text Area
A text area enhanced with color accents to draw attention to interactive elements.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="flex w-96 flex-col gap-6 justify-center itce">
3 <!-- Variant 1: Textarea Gray -->
4 <div class="relative w-full min-w-[200px]">
5 <textarea class="peer border-blue-gray-200 text-blue-gray-700 placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 disabled:bg-blue-gray-50 h-full min-h-[100px] w-full resize-none rounded-[7px] border border-t-transparent bg-transparent px-3 py-2.5 font-sans text-sm font-normal outline-0 transition-all placeholder-shown:border focus:border-2 focus:border-gray-900 focus:border-t-transparent focus:outline-0 disabled:resize-none disabled:border-0" placeholder=" "></textarea>
6 <label class="before:content[' '] after:content[' '] text-blue-gray-400 before:border-blue-gray-200 after:border-blue-gray-200 peer-placeholder-shown:text-blue-gray-500 peer-disabled:peer-placeholder-shown:text-blue-gray-500 pointer-events-none absolute -top-1.5 left-0 flex h-full w-full text-[11px] leading-tight font-normal transition-all select-none peer-placeholder-shown:text-sm peer-placeholder-shown:leading-[3.75] peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-gray-900 peer-disabled:text-transparent before:pointer-events-none before:mt-[6.5px] before:mr-1 before:box-border before:block before:h-1.5 before:w-2.5 before:rounded-tl-md before:border-t before:border-l before:transition-all peer-placeholder-shown:before:border-transparent peer-focus:before:border-t-2 peer-focus:before:border-l-2 peer-focus:before:border-gray-900 peer-disabled:before:border-transparent after:pointer-events-none after:mt-[6.5px] after:ml-1 after:box-border after:block after:h-1.5 after:w-2.5 after:flex-grow after:rounded-tr-md after:border-t after:border-r after:transition-all peer-placeholder-shown:after:border-transparent peer-focus:after:border-t-2 peer-focus:after:border-r-2 peer-focus:after:border-gray-900 peer-disabled:after:border-transparent"> Textarea Gray </label>
7 </div>
8
9 <!-- Variant 2: Textarea Purple -->
10 <div class="relative w-full min-w-[200px]">Disabled Text Area
A non-editable text area used to display read-only content.
1<div class="flex justify-center items-center p-2 md:p-5">
2 <div class="flex flex-col gap-6 w-96">
3 <!-- Disabled Textarea -->
4 <div class="relative w-full">
5 <textarea id="disabled-textarea" disabled
6 class="peer block w-full min-h-[100px] resize-none rounded-[7px] border border-blue-gray-200 bg-blue-gray-50
7 px-3 py-2.5 font-sans text-sm text-blue-gray-700 outline-none transition-all
8 placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200"
9 placeholder=" "></textarea>
10 <label for="disabled-textarea"Text Area with Avatar and Actions
An advanced text area that integrates an avatar and action icons for enhanced interactivity.
1<div class="flex flex-col p-4 max-w-2xl mx-auto bg-white dark:bg-gray-800 shadow-lg transition-colors rounded-sm duration-200">
2 <!-- Top Section: Avatar & Textarea -->
3 <div class="flex space-x-3">
4 <img class="w-11 h-11 rounded-full flex-shrink-0 object-cover" src="https://via.placeholder.com/44" alt="User avatar">
5 <textarea
6 class="w-full bg-transparent text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 border-none focus:outline-none resize-none text-lg leading-relaxed"
7 placeholder="What's happening?" rows="3"></textarea>
8 </div>
9
10 <!-- Bottom Section: Action Buttons -->Chat Input Text Area
A compact text area tailored for chat and messaging interfaces.
1 <div class="bg-gray-800/95 dark:bg-gray-900/95 backdrop-blur-sm p-4 w-full border-t border-gray-700 dark:border-gray-800">
2 <div class="flex items-end space-x-2 bg-gray-700/80 dark:bg-gray-800/80 rounded-xl px-3 py-2 ring-1 ring-gray-600/30 dark:ring-gray-700/50 focus-within:ring-2 focus-within:ring-blue-500/50 transition-all duration-200">
3 <button type="button" class="p-2 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-600/50 dark:hover:bg-gray-700/50 transition-all" aria-label="Emoji">
4 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
5 <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"/>
6 <path d="M14.829 14.828a4.055 4.055 0 0 1-1.272.858 4.002 4.002 0 0 1-4.875-1.45l-1.658 1.119a6.063 6.063 0 0 0 1.621 1.62 5.963 5.963 0 0 0 2.148.903 6.042 6.042 0 0 0 3.542-.35 6.048 6.048 0 0 0 1.907-1.284c.181-.179.362-.358.536-.542l-1.658-1.119a4.017 4.017 0 0 1-.489.591z"/>
7 <circle cx="8.5" cy="10.5" r="1.5"/>
8 <circle cx="15.5" cy="10.5" r="1.5"/>
9 </svg>
10 </button>