Textarea

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

Input

Author Ron Hicks

Tailwind v3.4 12.7k 20

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

Manuela Bianka

4 years ago

12.4k
Textarea input
Fancy Textarea

Piet Vriend

3 years ago

11.9k
Drag and drop image upload with image preview

Santos78

3 years ago

23.7k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.7k
Elegant Switches
Useful Tailwind classes for creating several types of basic switches.

Nick Girga

1 year ago

991
Material 3 Radio Buttons [Light]
Radio buttons that conform to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.2k
Checkbox button
press the button to check

Anonymous

2 years ago

5.4k
flex row

Yanjun Lin

1 year ago

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

Maxim

1 year ago

2.8k
File Upload

Rajesh Maheshwari

1 year ago

1.5k
Search input

Leon Bachmann

3 years ago

11.5k
Payment Form

ABDO-SY

1 year ago

2.4k