Responsive Bank Card Information Form with TailwindCSS

A sleek and modern bank card information form built with raw HTML and styled using TailwindCSS. This responsive form includes fields for cardholder name, card number, expiry date, and CVV, designed for clean aesthetics and ease of use.

This tailwind example is contributed by SHARIFUL ISLAM, on 13-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Form

Author SHARIFUL ISLAM

Tailwind v3.4 2.3k 6

Fork Fullscreen

<div class="flex items-center justify-center min-h-screen ">
   <div class="bg-white p-6 rounded-2xl shadow-lg max-w-md w-full">
    <h1 class="text-2xl font-semibold mb-4 text-gray-800">Enter Card Information</h1>
    <form action="#" method="POST">
      
      <div class="mb-4">
        <label for="cardholder-name" class="block text-sm font-medium text-gray-700">Cardholder Name</label>
        <input
          type="text"
          id="cardholder-name"
          name="cardholder-name"
          placeholder="John Doe"
          class="mt-1 block w-full p-2 rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
          required
        />
      </div>

<div class="mb-4">
        <label for="card-number" class="block text-sm font-medium text-gray-700">Card Number</label>
        <input
          type="text"
          id="card-number"
          name="card-number"
          placeholder="1234 5678 9012 3456"
          class="mt-1 block w-full p-2 rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
          required
          maxlength="19"
        />
      </div>

<div class="flex gap-4">
        
        <div class="mb-4 w-1/2">
          <label for="expiry-date" class="block text-sm font-medium text-gray-700">Expiry Date</label>
          <input
            type="text"
            id="expiry-date"
            name="expiry-date"
            placeholder="MM/YY"
            class="mt-1 block w-full p-2 rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
            required
            maxlength="5"
          />
        </div>

<div class="mb-4 w-1/2">
          <label for="cvv" class="block text-sm font-medium text-gray-700">CVV</label>
          <input
            type="text"
            id="cvv"
            name="cvv"
            placeholder="123"
            class="mt-1 block w-full p-2 rounded-lg border-gray-300 focus:ring-blue-500 focus:border-blue-500 shadow-sm"
            required
            maxlength="3"
          />
        </div>
      </div>

<div>
        <button
          type="submit"
          class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg shadow hover:bg-blue-700 transition"
        >
          Submit
        </button>
      </div>
    </form>
  </div>
</div>

Related Examples

popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Ti To

2 years ago

7.8k
Apply Coupon Code form

Lyra Ravensong

3 years ago

9.3k
Contact us form template

Geoffrey Callaghan

2 years ago

7.6k
Book Appointment form
A schedule an appointment form is an online document that helps the user to schedule an appointment with the company or business.

Arya

4 years ago

13.7k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
Registration Form with Validation & Success State
A modern and interactive registration form built using Tailwind CSS and Alpine.js, designed for seamless user onboarding with real-time validation and elegant animations. This component includes client-side form validation, dynamic password visibility toggles, and a success confirmation screen with personalized feedback. It’s fully responsive, dark mode–ready, and styled for modern SaaS or startup platforms. ✨ Key Features 🧠 Real-time input validation for required fields (name, email, password, etc.) 🔒 Show/hide password toggle with animated SVG icons ✅ Success message with user details after submission 💨 Animated transitions using Alpine.js 🌙 Dark mode and light mode compatible 📱 Fully responsive across all screen sizes 🧩 Built with pure Tailwind CSS and Alpine.js (no external libraries) 💡 Perfect for: Registration or sign-up pages SaaS onboarding flows Portfolio or agency login systems Form validation demos or UI component libraries

wavy kits

1 year ago

683
Login Page
A responsive minimal login page built with pure HTML and Tailwind CSS. Includes social authentication buttons, email & password fields, remember me option, and a clean centered card design that's easy to integrate into SaaS and web applications.

JUGENDRA GANGWAR

3 weeks ago

10
Simple contact us form

Geoffrey Callaghan

2 years ago

8k
Responsive Contact Form
Modern Responsive Contact Form Design

UI-Templates

1 year ago

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

Ayyamperumal S

1 year ago

2.6k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2.1k
Simple Form 2

Mr Robot

4 years ago

11.7k