Simple Form 3

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

Tailwind v3.4 9.9k 10

<div class="bg-purple-600 min-h-screen flex items-center text-lg">
    <form action="" class="p-10 md:w-2/3 lg:w-1/2 mx-auto rounded">
        <div class="shadow">
            <div class="flex items-center bg-purple-400 rounded-t-lg border-purple-500 border-b">
                <label for="name" class="w-20 text-right mr-8 p-4 text-purple-200">Name</label>
                <input type="text" name="name" id="name" placeholder="Put in your name" class="flex-1 p-4 pl-0 bg-transparent placeholder-purple-300  outline-none text-white overflow-ellipsis overflow-hidden">
            </div>
            <div class="flex items-center bg-purple-400  rounded-b-lg border-purple-500 mb-10">
                <label for="twitter" class="w-20 text-right p-4 mr-8 text-purple-200">Twitter</label>
                <input type="text" name="twitter" id="twitter" placeholder="Put in Twitter pseudonym" class="flex-1 p-4 pl-0 bg-transparent placeholder-purple-300 outline-none text-white overflow-ellipsis overflow-hidden">
            </div>
        </div>
        <button class="bg-pink-400 block w-full rounded py-4 text-white font-bold shadow">Submit</button>

</form>
</div>

Related Examples

Simple login form

Freja Jensen

3 years ago

11.7k
Responsive Form
This modern, fully responsive account creation form is designed using HTML and Tailwind CSS, ensuring a clean, professional, and accessible user experience. It features a card-based layout with smooth spacing, a subtle shadow effect, and a structured grid system for optimal responsiveness across all devices.

Rajesh Maheshwari

1 year ago

1.8k
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

SHARIFUL ISLAM

1 year ago

2k
Responsive Registration Form with Tailwind CSS
A clean, mobile-friendly user registration form built using Tailwind CSS. It includes fields for full name, email, password, terms agreement, and styled components with hover and focus transitions.

Sudip chaudhary

1 year ago

1.5k
User registration form

Laurits

3 years ago

12.1k
form3

ABDO-SY

1 year ago

2.1k
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Nicole Shalom

1 year ago

1.9k
signup
its a regstration form

ishimwe shadad

1 year ago

1.9k
RegistrationForm

Ramesh Kumar Sah

1 year ago

920
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
Contact us section
Minimal contact us form

Leon Bachmann

3 years ago

13k