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

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.3k
Textarea input
Fancy Textarea

Author:
Piet Vriend

2 years ago

11k
Drag and drop image upload with image preview

Author:
Santos78

2 years ago

22.6k
Sign in / Login Form

Author:
Bunny

3 years ago

13.5k
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

9 months ago

1.4k
Custom Carosel

Author:
Md. Tofayel islam

1 year ago

2.7k
Custom Date Picker with TailwindCSS and Vanilla JavaScript
A lightweight, responsive date picker built with TailwindCSS for styling and vanilla JavaScript for interactivity. It includes an input field with a calendar dropdown, month navigation, and a “Today” shortcut button. The component is designed to be mobile-friendly, easy to customize, and can be integrated into any project without dependencies like React or external UI libraries.

Author:
SHARIFUL ISLAM

2 months ago

285
Search input

Author:
Leon Bachmann

2 years ago

10.7k
floting input

Author:
Md. Tofayel islam

1 year ago

2.7k
todo list with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

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

Author:
Nick Girga

5 months ago

419
Maintenance mode

Author:
Maxim

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components