Home
Mr Robot
Simple Form 3

Simple Form 3

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

Form

9.2k

<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

Form
form

Author:
Aman kumar

1 year ago

1.4k
WHOIS Domain Lookup

Author:
Maxim

4 months ago

265
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

3 years ago

22.5k
login
login by : html , css

Author:
Hacker Development

3 months ago

629
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2k
Sign up form
simple full-height register form

Author:
Lukas Müller

2 years ago

12.2k
Contact Form
with hidden email

Author:
Geoffrey Callaghan

1 year ago

6.3k
Book appointment form

Author:
Lukas Müller

2 years ago

26.4k
Text Rpg UI

Author:
Crimson

6 months ago

774
Contact us section
Minimal contact us form

Author:
Leon Bachmann

2 years ago

11.5k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

3 months ago

481
Modern Contact Section with Responsive Grid and Glassmorphic Form
A clean, professional contact section with a dual-column layout featuring contact details and a sleek glassmorphism-inspired form. Fully responsive with Tailwind CSS, supporting both light and dark modes.

Author:
Muhammad Umair Arshad

2 weeks ago

45

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components