Home
Piet Vriend
Textarea input

Textarea input

Fancy Textarea

This tailwind example is contributed by Piet Vriend, on 16-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Piet Vriend

10.9k

Fork Fullscreen

<div class="mt-10 p-10">
    <form class="flex flex-col mx-auto gap-2 max-w-lg">
        <fieldset class="contents">
            <div class="flex flex-col">
                <label for="input" class="font-semibold text-lg">Enter product
					description
				</label>
                <textarea name="input" id="input" rows="5" maxlength="256" required=""
					placeholder="Eg. A new and innovative water bottle that keeps drinks cold for 24 hours. [Max 256 chars]"
					class="rounded-lg p-4 bg-black/5 border-2 border-solid border-black/10 font-mono font-medium text-sm"></textarea>
            </div>
            <button type="submit"
				class="rounded-lg p-3 bg-green-500/20 border-2 border-solid border-green-500/20 transition-colors hover:bg-green-500/40 font-medium text-base leading-none flex flex-row items-center justify-center gap-2"><svg
					xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
					<path fill-rule="evenodd"
						d="M14.615 1.595a.75.75 0 01.359.852L12.982 9.75h7.268a.75.75 0 01.548 1.262l-10.5 11.25a.75.75 0 01-1.272-.71l1.992-7.302H3.75a.75.75 0 01-.548-1.262l10.5-11.25a.75.75 0 01.913-.143z"
						clip-rule="evenodd"></path>
				</svg>
				<span class="font-bold">Generate title now!</span>
			</button>
        </fieldset>
    </form>
</div>

Related Examples

Textarea

Author:
Ron Hicks

2 years ago

12.1k
test2

Author:
SHAHAD EIDAH ALHAERTHI

1 year ago

1.6k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Author:
Maxim

11 months ago

1.6k
flex row

Author:
Yanjun Lin

2 months ago

82
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.7k
Yes / No radio input with reset button

Author:
Kris Showen

2 years ago

10.4k
simple badge

Author:
Muhammad Imran

1 year ago

1.9k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

2 weeks ago

326
Cart with alpinejs and tailwind css
How to add items to your cart with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.2k
Invalid input detected message
incorrect input notification

Author:
Conan Hilton

2 years ago

12.3k
Simple OTP box Form
A Simple OTP form with full responsiveness && dark mode supported

Author:
Shariar Hasan

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components