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.

This tailwind example is contributed by Anonymous, on 09-Oct-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Form

Author Anonymous

Tailwind v3.4 13.5k 16

Fork Fullscreen

<div class="bg-gray-100 dark:bg-gray-900">
    <div class="w-full max-w-3xl mx-auto p-8">
        <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md border dark:border-gray-700">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Checkout</h1>

<div class="mb-6">
                <h2 class="text-xl font-semibold text-gray-700 dark:text-white mb-2">Shipping Address</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="first_name" class="block text-gray-700 dark:text-white mb-1">First Name</label>
                        <input type="text" id="first_name" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                    <div>
                        <label for "last_name" class="block text-gray-700 dark:text-white mb-1">Last Name</label>
                        <input type="text" id="last_name" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                </div>

<div class="mt-4">
                    <label for="address" class="block text-gray-700 dark:text-white mb-1">Address</label>
                    <input type="text" id="address" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                </div>

<div class="grid grid-cols-2 gap-4 mt-4">
                    <div>
                        <label for="state" class="block text-gray-700 dark:text-white mb-1">State</label>
                        <input type="text" id="state" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                    <div>
                        <label for="zip" class="block text-gray-700 dark:text-white mb-1">ZIP Code</label>
                        <input type="text" id="zip" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                </div>
            </div>

<div>
                <h2 class="text-xl font-semibold text-gray-700 dark:text-white mb-2">Payment Information</h2>
                <div class="mt-4">
                    <label for="card_number" class="block text-gray-700 dark:text-white mb-1">Card Number</label>
                    <input type="text" id="card_number" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                </div>

<div class="grid grid-cols-2 gap-4 mt-4">
                    <div>
                        <label for="exp_date" class="block text-gray-700 dark:text-white mb-1">Expiration Date</label>
                        <input type="text" id="exp_date" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                    <div>
                        <label for="cvv" class="block text-gray-700 dark:text-white mb-1">CVV</label>
                        <input type="text" id="cvv" class="w-full rounded-lg border py-2 px-3 dark:bg-gray-700 dark:text-white dark:border-none">
                    </div>
                </div>
            </div>

<div class="mt-8 flex justify-end">
                <button class="bg-teal-500 text-white px-4 py-2 rounded-lg hover:bg-teal-700 dark:bg-teal-600 dark:text-white dark:hover:bg-teal-900">Place Order</button>
            </div>
        </div>
    </div>
</div>

Related Examples

Checkout form

Sienna

3 years ago

14.9k
Book appointment form

Lukas Müller

3 years ago

29.5k
Form for editing items

Sophia Baker

3 years ago

18.8k
Reservation form

Lukas Müller

3 years ago

14.5k
Credit / Debit card payment information form

Santos78

3 years ago

20.8k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.7k
Contact us form template

Geoffrey Callaghan

2 years ago

7.6k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Homayoun

11 months ago

1.5k
Login form

ariaw

10 months ago

1.3k
login
Dark mode login

Hacker Development

1 year ago

2k
Contact us form
Contact us form

Geoffrey Callaghan

2 years ago

7.5k
Feedback Form with fabform.io

Ho O

1 year ago

1.8k