Home
SHARIFUL ISLAM
Responsive Bank Card Information Form with TailwindCSS

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 CSS v3. It is responsive.

Form

Author SHARIFUL ISLAM

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

Waitlist signup form

Author:
Anonymous

1 year ago

2.9k
Reservation form with fabform.io

Author:
Ho O

1 month ago

235
Confirm OTP Form
can be used as a reset password form

Author:
Santos78

1 year ago

9.7k
Login Form
Admin Login Form

Author:
Khalid

11 months ago

1.5k
beautiful tailwind contact form
beautiful tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

4.8k
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:
Anonymous

8 months ago

2.2k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

1 year ago

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

Author:
Ti To

1 year ago

5.8k
Simple Sign-In Box
It features a backdrop blur effect on a dark background, creating an elegant and modern look.

Author:
Anja Müller

1 year ago

6.7k
Sign in / Login Form

Author:
Bunny

2 years ago

12k
User registration form

Author:
Leon Bachmann

2 years ago

19.9k
Responsive registration form
form with social login buttons

Author:
Sophia Baker

2 years ago

34k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components