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)

783

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

Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

11 months ago

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

Author:
Rajesh Pandey

8 months ago

946
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

839
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

3 months ago

523
portfolio
This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

Author:
nejaa badr

1 year ago

2.3k
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.9k
Giftcard grid

Author:
ariaw

4 months ago

427
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

140
Password Generator
This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

Author:
SAURAV SINGH

6 months ago

520
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.6k
Sign up
sign up page

Author:
gidy

7 months ago

1.3k
Innovative Developer & Digital Creator
Innovative Developer

Author:
gidy

7 months ago

894

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components