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

16.9k

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

19.7k
Credit card form 2

Author:
Oliver Hansen

2 years ago

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

3 years ago

23.4k
Checkout form

Author:
Sienna

2 years ago

13.8k
Book appointment form

Author:
Lukas Müller

2 years ago

27.4k
User registration form with Instructions

Author:
Fagundo67

2 years ago

24.4k
Appointment booking form

Author:
Leif99

2 years ago

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

3 years ago

49.7k
update user
it is the layout for creating an event

Author:
seth dridi

1 year ago

1.8k
Contact Us form

Author:
ABDO-SY

7 months ago

972
Login Form

Author:
UI-Templates

3 weeks ago

124
Get in Touch – Let's Connect! Responsive Contact Section Using TailwindCSS
Need a website, have a project idea, or just want to say hello? Feel free to reach out! My Contact Section is built with Tailwind CSS, ensuring a clean, responsive, and user-friendly experience. Drop me a message, and let's create something amazing together!

Author:
Abdul Baset Bappy

7 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components