Simple Form 2

This tailwind example is contributed by Mr Robot, on 08-Sep-2022. Component is made with Tailwind v3.4.

Tailwind v3.4 11.8k 13

<div class="bg-green-200 min-h-screen flex items-center">
    <div class="bg-white p-10 md:w-2/3 lg:w-1/2 mx-auto rounded">
        <form action="">

<div class="flex items-center mb-10">
                <label for="twitter" class="w-20 inline-block text-right mr-4 text-gray-500 text-gray-500">Twitter</label>
                <input type="text" name="twitter" id="twitter" placeholder="Your Twitter pseudonym" class="border-b-2 border-gray-400 flex-1 py-2 placeholder-gray-300 outline-none focus:border-green-400">
            </div>
            <div class="text-right">
                <button class="py-3 px-8 bg-green-500 text-green-100 font-bold rounded">Submit</button>
            </div>
        </form>
    </div>
</div>

Related Examples

Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Arya

4 years ago

13.7k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.7k
Feedback Form with fabform.io

Ho O

1 year ago

1.8k
contact us form
contact us form that uses the Free VeilMail EmailProtection Service too!

Geoffrey Callaghan

3 years ago

6.9k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k
Credit card form 2

Oliver Hansen

3 years ago

15.2k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
beautiful tailwind contact form
beautiful tailwind contact form

Geoffrey Callaghan

2 years ago

6.6k
Incentives
tailwind css Incentives

Anonymous

2 years ago

6k
Contact Us form

ABDO-SY

1 year ago

1.5k
Contact us section
Minimal contact us form

Geoffrey Callaghan

3 years ago

6.2k
RegistrationForm

Ramesh Kumar Sah

1 year ago

920