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

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.7k
Login Form with Icon

Author:
Prashant

2 years ago

16.6k
floting input

Author:
Md. Tofayel islam

1 year ago

2.4k
Elegant Textboxes
Useful Tailwind classes for creating several types of animated textboxes. Inspired by Google's floating label input fields.

Author:
Nick Girga

2 months ago

112
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

4 months ago

943
test2

Author:
SHAHAD EIDAH ALHAERTHI

10 months ago

1.2k
bardui.com badge

Author:
Muhammad Imran

9 months ago

1.4k
Maintenance mode

Author:
Maxim

1 year ago

3.3k
Search input with Tailwind CSS and Alpinejs
How to create a search input with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
Michael Andreuzza

1 year ago

2.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

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

Author:
Maxim

8 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components