Simple Form

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

Form

Author Mr Robot

Tailwind v3.4 10.7k 11

Fork Fullscreen

<div class="bg-blue-200 min-h-screen flex items-center">
    <div class="w-full">
        <h2 class="text-center text-blue-400 font-bold text-2xl uppercase mb-10">Fill out our form</h2>
        <div class="bg-white p-10 rounded-lg shadow md:w-3/4 mx-auto lg:w-1/2">
            <form action="">
                <div class="mb-5">
                    <label for="name" class="block mb-2 font-bold text-gray-600">Name</label>
                    <input type="text" id="name" name="name" placeholder="Put in your fullname." class="border border-gray-300 shadow p-3 w-full rounded mb-">
                </div>

<div class="mb-5">
                    <label for="twitter" class="block mb-2 font-bold text-gray-600">Twitter</label>
                    <input type="text" id="twitter" name="twitter" placeholder="Put in your fullname." class="border border-red-300 shadow p-3 w-full rounded mb-">
                    <p class="text-sm text-red-400 mt-2">Twitter username is required</p>
                </div>

<button class="block w-full bg-blue-500 text-white font-bold p-4 rounded-lg">Submit</button>
            </form>
        </div>
    </div>
</div>

Related Examples

Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
Credit / Debit card payment information form

Santos78

3 years ago

20.8k
Forgot password form (fullscreen)

Prajwal Hallale

3 years ago

12.3k
Forgot password form

ariaw

11 months ago

794
Sign up form

ariaw

11 months ago

1.3k
Default phone input

Md. Tofayel islam

2 years ago

3.7k
Login Form
Admin Login Form

Khalid

2 years ago

2.6k
Made a sinup form
Made a sinnup form #sufyandev

Sufyan jutt

8 months ago

449
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
Waitlist signup form

Anonymous

2 years ago

5.5k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
login page

Abid Ullah

2 years ago

3.1k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.