Home
Tanvir Hasan Bappy (Tanvir)
Subscription Plans

Subscription Plans

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 17-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

276

Fork Fullscreen

<!DOCTYPE html>
<html lang="en" x-data="subscription()" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Subscription Plans</title>
  <script src="//unpkg.com/alpinejs" defer></script>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    [x-cloak] { display: none !important; }
    .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }
    .modal-content {
      max-height: 90vh;
      overflow-y: auto;
    }
    
    /* Credit Card Styling */
    .credit-card-container {
      perspective: 1000px;
      width: 100%;
      height: 200px;
      position: relative;
      margin-bottom: 20px;
    }
    
    .credit-card {
      width: 100%;
      height: 100%;
      position: absolute;
      transform-style: preserve-3d;
      transition: transform 0.6s;
    }
    
    .credit-card.flipped {
      transform: rotateY(180deg);
    }
    
    .credit-card-front, .credit-card-back {
      width: 100%;
      height: 100%;
      position: absolute;
      backface-visibility: hidden;
      border-radius: 10px;
      color: white;
      padding: 20px;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
    
    .credit-card-front {
      background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    }
    
    .credit-card-back {
      background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
      transform: rotateY(180deg);
    }
    
    .credit-card-chip {
      width: 50px;
      height: 40px;
      background: linear-gradient(135deg, #ffcc33 0%, #f5a623 100%);
      border-radius: 6px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
    }
    
    .credit-card-chip::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 1px;
      background: rgba(0, 0, 0, 0.3);
    }
    
    .credit-card-chip::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      height: 100%;
      width: 1px;
      background: rgba(0, 0, 0, 0.3);
    }
    
    .credit-card-logo {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 24px;
      font-weight: bold;
    }
    
    .credit-card-number {
      font-size: 22px;
      letter-spacing: 2px;
      margin-bottom: 20px;
      font-family: monospace;
    }
    
    .credit-card-info {
      display: flex;
      justify-content: space-between;
    }
    
    .credit-card-info div {
      display: flex;
      flex-direction: column;
    }
    
    .credit-card-info span:first-child {
      font-size: 10px;
      text-transform: uppercase;
      opacity: 0.7;
      margin-bottom: 5px;
    }
    
    .credit-card-stripe {
      background-color: #000;
      height: 40px;
      margin: 20px 0;
    }
    
    .credit-card-signature {
      background-color: #fff;
      height: 40px;
      margin-top: 20px;
      position: relative;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 10px;
    }
    
    .credit-card-cvc {
      color: #000;
      font-weight: bold;
      font-size: 14px;
    }
    
    /* Input Styling */
    .card-input-icon {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
    }
    
    .input-container {
      position: relative;
    }
  </style>
</head>
<body class="bg-gray-100 text-gray-800" x-cloak>

<section class="py-12 px-6 max-w-6xl mx-auto">
    <h1 class="text-3xl font-bold text-center mb-10">Choose Your Plan</h1>

<div class="grid md:grid-cols-3 gap-8 justify-center">
      <template x-for="plan in plans" :key="plan.id">
        <div 
          x-bind:class="selectedPlan === plan.id ? 'ring-2 ring-blue-500' : ''"
          @click="selectPlan(plan.id)"
          class="p-6 bg-white rounded-lg shadow-md cursor-pointer hover:shadow-lg transition duration-200"
        >
          <h2 class="text-xl font-semibold mb-2" x-text="plan.name"></h2>
          <p class="text-gray-600 mb-4" x-text="plan.description"></p>
          <p class="text-2xl font-bold mb-4" x-text="`$${plan.price}/mo`"></p>
          <ul class="space-y-2 mb-6">
            <template x-for="feature in plan.features" :key="feature">
              <li class="flex items-center">
                <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                </svg>
                <span x-text="feature"></span>
              </li>
            </template>
          </ul>
          <button 
            @click.stop="openPaymentModal(plan.id)"
            class="mt-4 w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
            x-text="selectedPlan === plan.id ? 'Selected' : 'Select Plan'"
          ></button>
        </div>
      </template>
    </div>

<div x-show="showPaymentModal" x-cloak class="modal-backdrop" @click.self="showPaymentModal = false">
      <div class="modal-content bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl mx-4">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-semibold">Payment Details</h2>
          <div class="flex items-center">
            <span class="mr-4 px-3 py-1 bg-blue-100 text-blue-800 rounded-full" x-text="getCurrentPlanName()"></span>
            <button @click="showPaymentModal = false" class="text-gray-500 hover:text-gray-700">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
        </div>
        
        
        <div class="credit-card-container">
          <div class="credit-card" :class="{ 'flipped': isCardFlipped }">
            
            <div class="credit-card-front">
              <div class="credit-card-logo">
                <span x-text="getCardType()"></span>
              </div>
              <div class="credit-card-chip"></div>
              <div class="credit-card-number" x-text="formatCardNumber(paymentDetails.cardNumber)"></div>
              <div class="credit-card-info">
                <div>
                  <span>Card Holder</span>
                  <span x-text="paymentDetails.name || 'YOUR NAME'"></span>
                </div>
                <div>
                  <span>Expires</span>
                  <span x-text="paymentDetails.expiry || 'MM/YY'"></span>
                </div>
              </div>
            </div>
            
            
            <div class="credit-card-back">
              <div class="credit-card-stripe"></div>
              <div class="credit-card-signature">
                <div class="credit-card-cvc" x-text="paymentDetails.cvc || 'CVC'"></div>
              </div>
              <div class="text-xs mt-4 text-center opacity-70">
                This card is issued by Your Bank. By using this card, you agree to the terms and conditions.
              </div>
            </div>
          </div>
        </div>
        
        <form @submit.prevent="submitPayment" class="space-y-4">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700">Cardholder Name</label>
            <input type="text" id="name" x-model="paymentDetails.name" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2">
          </div>
          <div>
            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
            <input type="email" id="email" x-model="paymentDetails.email" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2">
          </div>
          <div class="input-container">
            <label for="card" class="block text-sm font-medium text-gray-700">Card Number</label>
            <input 
              type="text" 
              id="card" 
              x-model="paymentDetails.cardNumber" 
              x-on:input="paymentDetails.cardNumber = formatRawCardNumber(paymentDetails.cardNumber)"
              x-on:focus="isCardFlipped = false"
              maxlength="19" 
              placeholder="1234 5678 9012 3456"
              required 
              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10"
            >
            <div class="card-input-icon">
              <svg x-show="getCardType() === 'VISA'" class="h-6 w-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5-9h10v2H7v-2z"/>
              </svg>
              <svg x-show="getCardType() === 'MC'" class="h-6 w-6 text-red-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              </svg>
              <svg x-show="getCardType() === 'AMEX'" class="h-6 w-6 text-gray-600" viewBox="0 0 24 24" fill="currentColor">
                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v5zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2v1.5zM11 9H9v1h3v1.5H7.5V9c0-.55.45-1 1-1H11c.55 0 1 .45 1 1v1.5H9.5V9zm3 1.5H16V9h1v1.5h1.5V9h1v1.5H18V12h1.5v1H18v1.5h-1V12h-1.5v2.5h-1V12h-1.5v-1.5zm-1.5 7H14V16h1.5v1.5z"/>
              </svg>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="input-container">
              <label for="exp" class="block text-sm font-medium text-gray-700">Expiration Date</label>
              <input 
                type="text" 
                id="exp" 
                placeholder="MM/YY" 
                x-model="paymentDetails.expiry" 
                x-on:input="formatExpiryDate()"
                x-on:focus="isCardFlipped = false"
                maxlength="5"
                required 
                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10"
              >
              <div class="card-input-icon">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </div>
            </div>
            <div class="input-container">
              <label for="cvc" class="block text-sm font-medium text-gray-700">CVC</label>
              <input 
                type="text" 
                id="cvc" 
                x-model="paymentDetails.cvc" 
                x-on:focus="isCardFlipped = true"
                x-on:blur="isCardFlipped = false"
                maxlength="4" 
                required 
                class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 p-2 pr-10"
              >
              <div class="card-input-icon">
                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
              </div>
            </div>
          </div>
          
          
          <div class="mt-6 pt-4 border-t border-gray-200">
            <h3 class="text-lg font-medium text-gray-900 mb-3">Order Summary</h3>
            <div class="flex justify-between mb-2">
              <span x-text="getCurrentPlanName()"></span>
              <span x-text="`$${getCurrentPlanPrice()}`"></span>
            </div>
            <div class="flex justify-between mb-2 text-sm text-gray-600">
              <span>Tax</span>
              <span x-text="`$${(getCurrentPlanPrice() * 0.1).toFixed(2)}`"></span>
            </div>
            <div class="flex justify-between font-bold text-lg pt-2 border-t border-gray-200 mt-2">
              <span>Total</span>
              <span x-text="`$${(getCurrentPlanPrice() * 1.1).toFixed(2)}`"></span>
            </div>
          </div>
          
          <button type="submit" class="w-full mt-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
            Subscribe Now
          </button>
        </form>
      </div>
    </div>
  </section>

<script>
    function subscription() {
      return {
        selectedPlan: null,
        showPaymentModal: false,
        isCardFlipped: false,
        paymentDetails: {
          name: '',
          email: '',
          cardNumber: '',
          expiry: '',
          cvc: ''
        },
        plans: [
          {
            id: 1,
            name: "Basic",
            description: "Perfect for individuals",
            price: 9.99,
            features: ["1 User", "1 Project", "Basic Support"]
          },
          {
            id: 2,
            name: "Pro",
            description: "For growing teams",
            price: 29.99,
            features: ["5 Users", "Unlimited Projects", "Priority Support"]
          },
          {
            id: 3,
            name: "Enterprise",
            description: "For large organizations",
            price: 99.99,
            features: ["Unlimited Users", "All Features", "24/7 Dedicated Support"]
          }
        ],
        selectPlan(id) {
          this.selectedPlan = id;
        },
        openPaymentModal(id) {
          this.selectedPlan = id;
          this.showPaymentModal = true;
        },
        getCurrentPlanName() {
          const plan = this.plans.find(p => p.id === this.selectedPlan);
          return plan ? plan.name + " Plan" : "";
        },
        getCurrentPlanPrice() {
          const plan = this.plans.find(p => p.id === this.selectedPlan);
          return plan ? plan.price : 0;
        },
        formatCardNumber(number) {
          if (!number) return "•••• •••• •••• ••••";
          const value = number.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
          const matches = value.match(/\d{4,16}/g);
          const match = matches && matches[0] || '';
          const parts = [];
          
          for (let i = 0; i < match.length; i += 4) {
            parts.push(match.substring(i, i + 4));
          }
          
          if (parts.length) {
            return parts.join(' ');
          } else {
            return number;
          }
        },
        formatRawCardNumber(number) {
          if (!number) return "";
          number = number.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
          if (number.length > 16) number = number.substr(0, 16);
          
          // Format with spaces
          let result = "";
          for (let i = 0; i < number.length; i++) {
            if (i > 0 && i % 4 === 0) {
              result += " ";
            }
            result += number[i];
          }
          
          return result;
        },
        formatExpiryDate() {
          let value = this.paymentDetails.expiry.replace(/\s+/g, '').replace(/[^0-9]/gi, '');
          
          if (value.length > 2) {
            this.paymentDetails.expiry = value.substring(0, 2) + '/' + value.substring(2, 4);
          } else {
            this.paymentDetails.expiry = value;
          }
        },
        getCardType() {
          const number = this.paymentDetails.cardNumber.replace(/\s+/g, '');
          
          // Visa
          if (number.match(/^4/)) {
            return "VISA";
          }
          
          // Mastercard
          if (number.match(/^5[1-5]/)) {
            return "MC";
          }
          
          // AMEX
          if (number.match(/^3[47]/)) {
            return "AMEX";
          }
          
          return "CARD";
        },
        submitPayment() {
          // In real app, integrate with Stripe, PayPal, etc.
          const selectedPlan = this.plans.find(p => p.id === this.selectedPlan);
          alert(`Subscribed to ${selectedPlan.name} at $${selectedPlan.price}/mo`);
          console.log("Payment Data Submitted:", this.paymentDetails);
          // Clear form
          this.paymentDetails = {
            name: '',
            email: '',
            cardNumber: '',
            expiry: '',
            cvc: ''
          };
          this.showPaymentModal = false;
        }
      };
    }
  </script>

</body>
</html>

Related Examples

DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Author:
Ameth Galarcio

4 months ago

1.1k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

2 months ago

62
Typewriter animation effect
Build using only Tailwind CSS; no JavaScript is required. This is a continuous typing effect. If you want to stop it after the text is typed for the first time, then you can remove 'infinite' from [typing: 'typing 2s steps(20) infinite alternate, blink .7s infinite'] from the config file.

Author:
Samuel Dawson

1 year ago

19.2k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

16.9k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

2 months ago

369
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

2 months ago

481
Sticky fullpage pages / slides

Author:
Laurits

2 years ago

14.6k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

1 week ago

15
Upvote downvote buttons [alpine]
upvote and downvote buttons made as working version in alpine.js

Author:
Anonymous

1 year ago

7.8k
Checkbox
Checkbox

Author:
Aman kumar

11 months ago

1.2k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

4 months ago

865
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

20.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components