Home
dev-fab250
payment card

payment card

A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

This tailwind example is contributed by dev-fab250, on 21-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Card Form

Author dev-fab250

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Visa Payment Card</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            'card-dark': '#1A1F71',
            'card-light': '#6F7CFF',
            'visa-gold': '#F7B600',
          },
          boxShadow: {
            'card': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 30px rgba(107, 114, 255, 0.2)',
            'card-hover': '0 25px 30px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 40px rgba(107, 114, 255, 0.3)',
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          }
        }
      }
    }
  </script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    
    body {
      font-family: 'Inter', sans-serif;
    }
    
    .card-flip {
      perspective: 1000px;
    }
    
    .card-inner {
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    
    .card-front, .card-back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    
    .card-back {
      transform: rotateY(180deg);
    }
    
    .card-inner.is-flipped {
      transform: rotateY(180deg);
    }
    
    .chip {
      background: linear-gradient(135deg, #ffd973 0%, #d4a017 50%, #e6bd5a 100%);
    }
    
    .shimmer {
      position: relative;
      overflow: hidden;
    }
    
    .shimmer::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      animation: shimmerEffect 3s infinite;
    }
    
    @keyframes shimmerEffect {
      0% {
        transform: translateX(-150%) rotate(30deg);
      }
      100% {
        transform: translateX(150%) rotate(30deg);
      }
    }

/* Focus effect for input fields */
    .focus-ring {
      transition: all 0.2s ease;
    }
    .focus-ring:focus-within {
      transform: translateY(-3px);
    }
    
    /* Input focus and animated label */
    .input-field {
      transition: all 0.3s ease;
    }
    
    .input-label {
      transition: all 0.3s ease;
      pointer-events: none;
    }
    
    .input-field:focus + .input-label,
    .input-field:not(:placeholder-shown) + .input-label {
      transform: translateY(-18px) scale(0.75);
      color: #4F46E5;
    }
    
    /* Custom number input styling */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    
    input[type=number] {
      -moz-appearance: textfield;
    }
  </style>
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen flex items-center justify-center p-4 md:p-8">
  <div class="w-full max-w-lg bg-white rounded-2xl shadow-xl overflow-hidden">
    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 p-6 sm:p-8 text-white">
      <h1 class="text-3xl font-bold mb-2">Payment Details</h1>
      <p class="text-indigo-100 opacity-80">Complete your transaction securely</p>
    </div>
    
    
    <div class="px-6 sm:px-8 pt-8 mb-6 relative">
      <div class="card-flip relative w-full mx-auto" style="height: 200px; max-width: 340px;">
        <div class="card-inner absolute w-full h-full shadow-card hover:shadow-card-hover rounded-2xl transition-shadow duration-300">
          
          <div class="card-front absolute w-full h-full bg-gradient-to-br from-card-dark to-card-light rounded-2xl p-6 shimmer">
            <div class="flex justify-between items-start">
              <div class="text-white font-light text-lg tracking-wider">Credit Card</div>
              <div class="text-white text-2xl font-bold italic">VISA</div>
            </div>
            
            <div class="mt-6">
              <div class="chip w-12 h-9 rounded-md mb-3"></div>
            </div>
            
            <div class="text-white text-xl tracking-widest mb-4 font-light" id="card-number-display">
              •••• •••• •••• ••••
            </div>
            
            <div class="flex justify-between text-sm">
              <div>
                <div class="text-white opacity-70 text-xs mb-1">CARD HOLDER</div>
                <div class="text-white tracking-wide" id="card-name-display">YOUR NAME</div>
              </div>
              <div>
                <div class="text-white opacity-70 text-xs mb-1">EXPIRES</div>
                <div class="text-white tracking-wide">
                  <span id="month-display">MM</span>/<span id="year-display">YY</span>
                </div>
              </div>
            </div>
          </div>
          
          
          <div class="card-back absolute w-full h-full bg-gradient-to-br from-gray-700 to-gray-900 rounded-2xl">
            <div class="w-full h-12 bg-black mt-5"></div>
            <div class="p-6">
              <div class="text-gray-400 text-xs mb-2">CVV</div>
              <div class="flex justify-end mb-2">
                <div class="bg-white w-full h-10 flex items-center justify-end pr-4 rounded">
                  <div class="text-gray-800 tracking-widest" id="cvv-display">•••</div>
                </div>
              </div>
              <div class="flex items-center justify-end mt-4">
                <svg class="text-visa-gold fill-current mr-2" width="40" height="12" viewBox="0 0 50 16">
                  <path d="M15.22,0.15L9.8,15.57h-3.67l-5.36,-15.42h3.67l3.67,11.46l3.67,-11.46h3.45Z"/>
                  <path d="M19.83,15.57l-3.82,-8.19l-1.78,2.37l-1.26,5.82h-3.45l5.36,-15.42h3.45l-3.3,7.43l5.52,-7.43h4.12l-6.73,8.19l3.82,7.23h-4.12Z"/>
                </svg>
                <div class="text-white text-xs">Secured by VISA</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    
    <div class="px-6 sm:px-8 pb-8 space-y-6">
      <div class="relative focus-ring">
        <div class="relative">
          <input
            type="text"
            id="card-number"
            class="input-field block w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all duration-200"
            placeholder=" "
            maxlength="19"
            oninput="updateCardDisplay()"
          />
          <label for="card-number" class="input-label absolute left-4 top-4 text-gray-500 text-sm">
            Card Number
          </label>
          <div class="absolute right-3 top-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-indigo-500">
              <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
              <line x1="1" y1="10" x2="23" y2="10"></line>
            </svg>
          </div>
        </div>
      </div>
      
      <div class="relative focus-ring">
        <input
          type="text"
          id="card-name"
          class="input-field block w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all duration-200"
          placeholder=" "
          oninput="updateCardDisplay()"
        />
        <label for="card-name" class="input-label absolute left-4 top-4 text-gray-500 text-sm">
          Cardholder Name
        </label>
      </div>
      
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="relative focus-ring">
          <div class="flex space-x-2">
            <div class="w-1/2 relative">
              <input
                type="number"
                id="expiry-month"
                class="input-field block w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all duration-200"
                placeholder=" "
                min="1"
                max="12"
                oninput="updateCardDisplay()"
              />
              <label for="expiry-month" class="input-label absolute left-4 top-4 text-gray-500 text-sm">
                Month
              </label>
            </div>
            <div class="w-1/2 relative">
              <input
                type="number"
                id="expiry-year"
                class="input-field block w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all duration-200"
                placeholder=" "
                min="23"
                max="35"
                oninput="updateCardDisplay()"
              />
              <label for="expiry-year" class="input-label absolute left-4 top-4 text-gray-500 text-sm">
                Year
              </label>
            </div>
          </div>
        </div>
        
        <div class="relative focus-ring">
          <input
            type="number"
            id="cvv"
            class="input-field block w-full px-4 pt-6 pb-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 focus:outline-none transition-all duration-200"
            placeholder=" "
            maxlength="3"
            onfocus="flipCard(true)"
            onblur="flipCard(false)"
            oninput="updateCardDisplay()"
          />
          <label for="cvv" class="input-label absolute left-4 top-4 text-gray-500 text-sm">
            CVV
          </label>
          <div class="absolute right-3 top-4">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-400">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="16" x2="12" y2="12"></line>
              <line x1="12" y1="8" x2="12.01" y2="8"></line>
            </svg>
          </div>
        </div>
      </div>
      
      <button
        type="button"
        class="w-full bg-indigo-600 hover:bg-indigo-700 focus:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50"
        onclick="submitPayment()"
      >
        Pay Now
      </button>
      
      <div class="flex items-center justify-center mt-4 text-gray-600 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
          <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
          <path d="M1 10H23"></path>
          <path d="M4 15h2"></path>
          <path d="M8 15h2"></path>
          <path d="M12 15h2"></path>
        </svg>
        Secure payment processing
      </div>
    </div>
  </div>

for (let i = 0, len = match.length; i < len; i += 4) {
        parts.push(match.substring(i, i + 4));
      }

if (parts.length) {
        return parts.join(' ');
      } else {
        return value;
      }
    }

Related Examples

Authentication form
Use this example to authenticate users with a login form using a phone number instead of an email address.

Author:
Md. Tofayel islam

1 year ago

2.3k
Advanced phone verification

Author:
Md. Tofayel islam

1 year ago

1.8k
Form
form

Author:
Aman kumar

11 months ago

1.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

10 months ago

2.5k
Login form

Author:
Rajesh Maheshwari

3 months ago

702
File Upload

Author:
Rajesh Maheshwari

3 months ago

404
Sign up form

Author:
Rajesh Maheshwari

2 months ago

325
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

1 month ago

360
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

1 month ago

323
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.

Author:
Hamza Atig

1 month ago

144
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.

Author:
Hamza Atig

1 month ago

165
card
card

Author:
5upreme505

7 months ago

935

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components