Credit card form

This tailwind example is contributed by Oliver Hansen, on 08-Feb-2023. Component is made with Tailwind v3.4. It is responsive.

Form

Author Oliver Hansen

Tailwind v3.4 17.9k 13

Fork Fullscreen

<div class="max-w-sm mx-auto mt-20 bg-white rounded-md shadow-md overflow-hidden">
    <div class="px-6 py-4 bg-gray-900 text-white">
        <h1 class="text-lg font-bold">Credit Card</h1>
    </div>
    <div class="px-6 py-4">

<div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2" for="card-number">
                Card Number
            </label>
            <input
                class="appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="card-number" type="text" placeholder="**** **** **** ****">
        </div>

<div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2" for="expiration-date">
                Expiration Date
            </label>
            <input
                class="appearance-none border border-gray-400 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-4">
            <label class="block text-gray-700 font-bold mb-2" for="cvv">
                Cardholder Name
            </label>
            <input
                class="appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                type="text" placeholder="Full Name">
        </div>

Related Examples

Credit / Debit card payment information form

Santos78

3 years ago

20.8k
Credit card form 2

Oliver Hansen

3 years ago

15.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.

Akshay

4 years ago

24.8k
Checkout form

Sienna

3 years ago

15k
Book appointment form

Lukas Müller

3 years ago

29.5k
User registration form with Instructions

Fagundo67

3 years ago

25.2k
Appointment booking form

Leif99

3 years ago

18.5k
Simple Login Form
Very basic responsive login form. The form is centered within a white card with a shadow, featuring input fields for username and password. The design is clean and user-friendly.

Bunny

4 years ago

50.6k
Login Form
Admin Login Form

Khalid

2 years ago

2.6k
login form
this is login form

aditya_sharma

2 months ago

162
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.

Anonymous

2 years ago

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

Ameth Galarcio

2 years ago

5.3k