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

17.2k

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

Author:
Oliver Hansen

2 years ago

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

24k
Checkout form

Author:
Sienna

3 years ago

14k
Book appointment form

Author:
Lukas Müller

3 years ago

28.3k
User registration form with Instructions

Author:
Fagundo67

3 years ago

24.6k
Appointment booking form

Author:
Leif99

2 years ago

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

50k
Responsive Form2

Author:
ABDO-SY

11 months ago

1.1k
Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

1 month ago

51
Login template

Author:
Gabriel Urbano

2 years ago

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

Author:
Ho O

1 year ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components