Credit / Debit card payment information form

This tailwind example is contributed by Santos78, on 22-Mar-2023. Component is made with Tailwind v3.4. It is responsive.

Form

Author Santos78

Tailwind v3.4 20.8k 20

Fork Fullscreen

<div class="w-full max-w-lg mx-auto p-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h2 class="text-lg font-medium mb-6">Payment Information</h2>
        <form>
            <div class="grid grid-cols-2 gap-6">
                <div class="col-span-2 sm:col-span-1">
                    <label for="card-number" class="block text-sm font-medium text-gray-700 mb-2">Card Number</label>
                    <input type="text" name="card-number" id="card-number" placeholder="0000 0000 0000 0000" class="w-full py-3 px-4 border border-gray-400 rounded-lg focus:outline-none focus:border-blue-500">
                </div>
                <div class="col-span-2 sm:col-span-1">
                    <label for="expiration-date" class="block text-sm font-medium text-gray-700 mb-2">Expiration Date</label>
                    <input type="text" name="expiration-date" id="expiration-date" placeholder="MM / YY" class="w-full py-3 px-4 border border-gray-400 rounded-lg focus:outline-none focus:border-blue-500">
                </div>
                <div class="col-span-2 sm:col-span-1">
                    <label for="cvv" class="block text-sm font-medium text-gray-700 mb-2">CVV</label>
                    <input type="text" name="cvv" id="cvv" placeholder="000" class="w-full py-3 px-4 border border-gray-400 rounded-lg focus:outline-none focus:border-blue-500">
                </div>
                <div class="col-span-2 sm:col-span-1">
                    <label for="card-holder" class="block text-sm font-medium text-gray-700 mb-2">Card Holder</label>
                    <input type="text" name="card-holder" id="card-holder" placeholder="Full Name" class="w-full py-3 px-4 border border-gray-400 rounded-lg focus:outline-none focus:border-blue-500">
                </div>
            </div>
            <div class="mt-8">
                <button type="submit" class="w-full bg-green-500 hover:bg-blue-600 text-white font-medium py-3 rounded-lg focus:outline-none">Submit</button>
            </div>
        </form>
    </div>
</div>

Related Examples

Credit card form

Oliver Hansen

3 years ago

17.9k
Checkout form

Sienna

3 years ago

15k
Book appointment form

Lukas Müller

3 years ago

29.5k
Credit card form 2

Oliver Hansen

3 years ago

15.2k
Reservation form

Lukas Müller

3 years ago

14.6k
Responsive registration form
form with social login buttons

Sophia Baker

3 years ago

46.8k
Appointment booking form

Leif99

3 years ago

18.5k
Payment form (Alpine JS)

Mr Robot

4 years ago

10.6k
Responsive contact us section

Ron Hicks

3 years ago

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

Anonymous

3 years ago

13.6k
Simple Form

Mr Robot

4 years ago

10.7k
Contact us page template
full page fancy contact us page

Lukas Müller

3 years ago

17.8k