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

Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

nicoleshal07

1 year ago

1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

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

Geoffrey Callaghan

3 years ago

6.9k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.4k
Contact us Form
suitable for dark-themed websites

Anja Müller

3 years ago

10.6k
Responsive registration form
form with social login buttons

Anonymous

3 years ago

30.8k
Payment Form

ABDO-SY

1 year ago

2.4k
Verify otp form

Jakub Novak

3 years ago

18.9k
Contact form Modern
Contact Us We'd love to hear from you!

Alif Bima Pradana

9 months ago

1.1k
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
Simple login form

R Thapa

3 years ago

27.2k
OTP Verification Page

JUGENDRA GANGWAR

1 month ago

25