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)

525

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

Homepage event

Author:
Anonymous

1 month ago

164
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

3 months ago

377
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

7 months ago

1.3k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

1 month ago

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

Author:
Abhiraj

6 months ago

1.1k
button animation
button animation big

Author:
QQ-VVN

3 months ago

216
blog component
good blog

Author:
Uwera Dorcas

2 months ago

350
profile
user profile

Author:
gidy

2 months ago

221
hello world
by salvator

Author:
Anonymous

3 months ago

179
App Hero Section With header

Author:
Abdul Baset Bappy

1 month ago

349
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

11 months ago

1.7k
Login page

Author:
Reuben Enahoro

8 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components