Home
Sienna
Checkout form

Checkout form

This tailwind example is contributed by Sienna, on 04-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Sienna

13.8k

Fork Fullscreen

<div class="container mx-auto p4-10">
    <div class="max-w-md mx-auto bg-white rounded-lg overflow-hidden md:max-w-xl">
        <div class="md:flex">
            <div class="w-full px-6 py-8 md:p-8">
                <h2 class="text-2xl font-bold text-gray-800">Checkout</h2>
                <p class="mt-4 text-gray-600">Please fill out the form below to complete your purchase.</p>
                <form class="mt-6">
                    <div class="mb-6">
                        <label class="block text-gray-800 font-bold mb-2" for="name">
                            Name
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe">
                    </div>
                    <div class="mb-6">
                        <label class="block text-gray-800 font-bold mb-2" for="email">
                            Email
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="johndoe@example.com">
                    </div>
                    <div class="mb-6">
                        <label class="block text-gray-800 font-bold mb-2" for="card_number">
                            Card Number
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="card_number" type="text" placeholder="**** **** **** 1234">
                    </div>
                    <div class="mb-6">
                        <label class="block text-gray-800 font-bold mb-2" for="expiration_date">
                            Expiration Date
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="expiration_date" type="text" placeholder="MM / YY">
                    </div>
                    <div class="mb-6">
                        <label class="block text-gray-800 font-bold mb-2" for="cvv">
                            CVV
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="cvv" type="text" placeholder="***">
                    </div>
                    <button class="bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

Related Examples

Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.7k
Checkout form
A versatile checkout form component for users to provide shipping and payment information. It has fields for first name, last name, address, city, state, ZIP code, card number, expiration date, and CVV.

Author:
Anonymous

2 years ago

12.9k
Book appointment form

Author:
Lukas Müller

2 years ago

27.6k
Credit card form

Author:
Oliver Hansen

2 years ago

17k
Survey form
User survey form

Author:
JaxStone

2 years ago

16.5k
Reservation form

Author:
Lukas Müller

2 years ago

13.6k
Credit card form 2

Author:
Oliver Hansen

2 years ago

14.4k
User registration form

Author:
Leon Bachmann

2 years ago

24.6k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

2 years ago

7.8k
Records Form - HPower
records survey form

Author:
Anonymous

11 months ago

928
Elegant Split-Layout Contact Form (Navy Blue Edition)
Overview: A premium contact section styled in Navy Blue (bg-blue-900) to match the Service Carousel. Key Changes: Palette: Swapped all Teal references for Deep Blue (bg-blue-900 panel, text-blue-700 accents). Interactivity: Focus rings on inputs now glow with a soft blue (focus:ring-blue-600/10). Consistency: Maintains the "DM Serif Display" typography and "blob" background effects (now in blue/indigo) for a cohesive high-end look.

Author:
Juan D. Cortorreal

4 days ago

53
Appointment booking form

Author:
Ho O

10 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components