Home
Ron Hicks
Textarea

Textarea

This tailwind example is contributed by Ron Hicks, on 02-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Input

Author Ron Hicks

12.3k

Fork Fullscreen

<div class="max-w-xl mt-20 mx-auto">
    <div class="w-full px-3">
        <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-password">
            Your Message
        </label>
        <textarea rows="10"
            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"></textarea>
    </div>
    <div class="flex justify-between w-full px-3">
        <div class="md:flex md:items-center">
            <label class="block text-gray-500 font-bold">
                <input class="mr-2 leading-tight" type="checkbox">
                <span class="text-sm">
                    Send me your newsletter!
                </span>
            </label>
        </div>
        <button class="shadow bg-indigo-600 hover:bg-indigo-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-6 rounded" type="submit">
            Send Message
        </button>
    </div>
</div>

Related Examples

Comment section

Author:
Manuela Bianka

3 years ago

11.8k
Textarea input
Fancy Textarea

Author:
Piet Vriend

3 years ago

11.5k
Drag and drop image upload with image preview

Author:
Santos78

3 years ago

23.1k
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 year ago

2k
Checkbox button
press the button to check

Author:
Anonymous

2 years ago

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

Author:
Alok

3 years ago

12.3k
simple badge

Author:
Muhammad Imran

1 year ago

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

Author:
Ameth Galarcio

1 year ago

4.3k
Elegant OTP Input Fields with TailwindCSS
A clean and responsive OTP input field component built with TailwindCSS. This design features six single-character input fields with smooth transitions, light gray borders, and backgrounds. On focus, the borders turn blue, creating a visually appealing and user-friendly experience. Perfect for authentication and verification forms.

Author:
SHARIFUL ISLAM

1 year ago

1.8k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

10 months ago

901
Search input

Author:
Leon Bachmann

3 years ago

11k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components