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

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.3k
Login Form
Admin Login Form

Author:
Khalid

1 year ago

1.9k
Login Form

Author:
Amit Pachange

2 years ago

12.2k
Simple contact us form

Author:
Lukas Müller

2 years ago

11.2k
signup
its a regstration form

Author:
ishimwe shadad

1 month ago

271
login
Dark mode login

Author:
Hacker Development

1 month ago

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

Author:
Anja Müller

1 year ago

10.2k
Profile Form
Stunning Profile and Cover Image Fields

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

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

Author:
Ameth Galarcio

11 months ago

3.5k
Responsive registration form
form with social login buttons

Author:
Anonymous

1 year ago

26.2k
Login page with tailwind (SB admin 2)
This component features a split-screen design with a background image on one side and a registration form on the other.

Author:
Akshay

2 years ago

21.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components