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

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.3k
Credit card form 2

Author:
Oliver Hansen

2 years ago

13.7k
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.8k
Checkout form

Author:
Sienna

2 years ago

13.4k
Book appointment form

Author:
Lukas Müller

2 years ago

25.7k
User registration form with Instructions

Author:
Fagundo67

2 years ago

23.7k
Appointment booking form

Author:
Leif99

2 years ago

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

48.8k
login page

Author:
Abid Ullah

9 months ago

1.6k
Feedback form with fabform.io
Collect opinions about your company's service

Author:
Ho O

5 months ago

550
Contact Us Form
CTAs help convert visitors into action-takers (customers, subscribers, etc.), while Contact Us forms enable easy communication, building trust and support. Both are vital for engaging visitors and achieving your website’s objectives.

Author:
KULDEEP

1 day ago

19
Multi-Step Form with Progress Indicator
reusable "Multi-Step Form with Progress Indicator" component built with HTML, CSS, and Tailwind CSS. It’s a practical component for forms like signups, surveys, or checkout processes.

Author:
Ayyamperumal S

4 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components