Credit card form 2

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

Form

Author Oliver Hansen

Tailwind v3.4 15.2k 8

Fork Fullscreen

<div class="max-w-md mx-auto bg-gray-100 shadow-md rounded-md overflow-hidden mt-16">
    <div class="bg-blue-600 text-white p-4 flex justify-between">
        <div class="font-bold text-lg">Credit Card</div>
        <div class="text-lg"><i class="fab fa-cc-visa"></i></div>
    </div>
    <div class="p-6">
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2" for="card_number">
                Card Number
            </label>
            <input
                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="card_number" type="text" placeholder="xxxx xxxx xxxx xxxx">
        </div>
        <div class="mb-4 flex justify-between">
            <div>
                <label class="block text-gray-700 font-bold mb-2" for="expiration_date">
                    Expiration Date
                </label>
                <input
                    class="shadow appearance-none border rounded w-24 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>
                <label class="block text-gray-700 font-bold mb-2" for="cvv">
                    CVV
                </label>
                <input
                    class="shadow appearance-none border rounded w-24 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                    id="cvv" type="text" placeholder="XXX">
            </div>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 font-bold mb-2" for="name_on_card">
                Name on Card
            </label>
            <input
                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                id="name_on_card" type="text" placeholder="John Doe">
        </div>
        <button
            class="bg-blue-600 text-white py-2 px-4 rounded font-bold hover:bg-blue-700 focus:outline-none focus:shadow-outline">Save
            Card
        </button>
    </div>
</div>

Related Examples

Credit card form

Oliver Hansen

3 years ago

18k
Credit / Debit card payment information form

Santos78

3 years ago

20.8k
Contact Form Component with Responsive Design and Decorative Elements
A modern contact form component featuring a split layout with form fields and contact information. Includes name, email, and message inputs with icon integration, decorative SVG elements, and responsive design for all screen sizes. Built with clean HTML and Tailwind CSS styling for seamless integration into any website.

Homayoun

1 year ago

1.5k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Anum Shahana

2 years ago

4.1k
Contact us section
Minimal contact us form

Leon Bachmann

3 years ago

13k
Gaming UI Card, Form
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.

Ayyamperumal S

10 months ago

720
Sign up form

ariaw

11 months ago

1.3k
Feedback form
Collect opinions about your company's service

Arya

4 years ago

14.7k
Login Form
Login Form With google icon

Md. Tofayel islam

1 year ago

2.1k
Login template

Gabriel Urbano

2 years ago

7k
Age verification 18+

Maxim

1 year ago

1.6k