Home
Oliver Hansen
Credit card form 2

Credit card form 2

This tailwind example is contributed by Oliver Hansen, on 01-Mar-2023. Component is made with Tailwind CSS v3. It is responsive.

Form

Author Oliver Hansen

13.6k

Fork Fullscreen

<div class="max-w-md mx-auto bg-gray-100 shadow-md rounded-md overflow-hidden mt-16">
    <div class="bg-blue-600 text-white p-4 flex justify-between">
        <div class="font-bold text-lg">Credit Card</div>
        <div class="text-lg"><i class="fab fa-cc-visa"></i></div>
    </div>
    <div class="p-6">
        <div class="mb-4">
            <label class="block text-gray-700 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="xxxx xxxx xxxx xxxx">
        </div>
        <div class="mb-4 flex justify-between">
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="expiration_date">
                    Expiration Date
                </label>
                <input
                    class="shadow appearance-none border rounded w-24 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>
                <label class="block text-gray-700 font-bold mb-2" for="cvv">
                    CVV
                </label>
                <input
                    class="shadow appearance-none border rounded w-24 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    id="cvv" type="text" placeholder="XXX">
            </div>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2" for="name_on_card">
                Name on Card
            </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_on_card" type="text" placeholder="John Doe">
        </div>
        <button
            class="bg-blue-600 text-white py-2 px-4 rounded font-bold hover:bg-blue-700 focus:outline-none focus:shadow-outline">Save
            Card
        </button>
    </div>
</div>

Related Examples

Credit card form

Author:
Oliver Hansen

2 years ago

16.3k
Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.1k
Simple login form

Author:
Freja Jensen

2 years ago

10.4k
Feedback form
Collect opinions about your company's service

Author:
Arya

2 years ago

13.3k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 month ago

47
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Author:
Алла Телегина

2 months ago

702
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

25.9k
Contact Form for fabform.io
Contact form that uses fabform.io

Author:
Ho O

4 months ago

273
Login
Login form, responsive, no dark-mode for white backgrounds, elegant for any platform

Author:
Ameth Galarcio

10 months ago

3.3k
Contact me form

Author:
Arya

2 years ago

11.5k
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

1 week ago

25
Responsive Form

Author:
ABDO-SY

3 months ago

332

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components