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.1k

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

11.4k
time Tailwind CSS and Alpinejs

Author:
Hai mmm

5 months ago

887
Image input with preview
Show you a preview of the selected image.

Author:
Prajwal Hallale

2 years ago

25.7k
Range slider
Range slider with upper limit and lower limit.

Author:
Alok

2 years ago

11.1k
Toggle button

Author:
Matthew Chen

1 year ago

11.6k
Multi Range Slider
Adjust the sliders to set your preferred price range. The left slider sets the minimum price, and the right slider sets the maximum price. The selected range is displayed below the sliders in real-time, allowing you to easily filter products within your budget.

Author:
SHARIFUL ISLAM

1 month ago

397
Stacked Checkboxes

Author:
kishan pc

10 months ago

1.6k
File Upload

Author:
Rajesh Maheshwari

3 weeks ago

151
File upload

Author:
Laurits

2 years ago

11.6k
Select input

Author:
Sophia Baker

2 years ago

12.7k
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

8 months ago

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

Author:
Maxim

4 months ago

468

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components