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

<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

Contact us Form
suitable for dark-themed websites

Author:
Anja Müller

1 year ago

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

Author:
Ti To

1 year ago

7.7k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

41.6k
Text Rpg UI

Author:
Crimson

8 months ago

992
Sign up form

Author:
Rajesh Maheshwari

6 months ago

656
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

Author:
dev-fab250

3 months ago

379
Feedback Form with fabform.io

Author:
Ho O

8 months ago

983
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

4 months ago

828
Incentives
tailwind css Incentives

Author:
Anonymous

1 year ago

4.9k
Register Form
A simple and minimalistic register form.

Author:
Sonam Sherpa

2 days ago

20
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components