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)

691

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

Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

9 months ago

1.1k
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

9 months ago

1.9k
Privacy policy page template

Author:
Anonymous

1 year ago

2.6k
Features Component

Author:
KULDEEP

4 months ago

716
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

10 months ago

2k
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

884
404 Page Not Found

Author:
KULDEEP

5 months ago

790
Heading

Author:
KULDEEP

5 months ago

723
Tailwind Google Map widget

Author:
Dung Vuong

5 months ago

258
cards
cards with background animation

Author:
Anonymous

2 years ago

11.5k
Maintenance page

Author:
Faye

11 months ago

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

7 months ago

924

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components