Home
Oliver Hansen
Credit card form

Credit card form

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

Form

Author Oliver Hansen

15.7k

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

Author:
Santos78

2 years ago

18.9k
Credit card form 2

Author:
Oliver Hansen

2 years ago

13.4k
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

20.9k
Checkout form

Author:
Sienna

2 years ago

12.9k
Book appointment form

Author:
Lukas Müller

2 years ago

24.7k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.2k
Appointment booking form

Author:
Leif99

2 years ago

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

Author:
Bunny

2 years ago

48k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

10 months ago

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

Author:
Anonymous

1 year ago

11.8k
Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.2k
WHOIS Domain Lookup

Author:
Maxim

3 weeks ago

85

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components