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)

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

Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

1 year ago

15.8k
Midnight Lava Lamp
Inspired by Steam's old "Big Picture" ambiance. Based on anonymous/background-animation-2

Author:
Nick Girga

3 weeks ago

103
google clone page
This HTML page includes: The Google logo with the correct colors A search input field with microphone and camera icons "Google Search" and "Win Freeing Lucky" buttons The text "With new The ZGS Breakthrough Plus cabinets today's where business ?" Footer with all the links shown in the image: Advertising, Business, New Search works, Privacy, Terms, Settings The climate action text in the footer The layout is responsive and uses Tailwind CSS for styling. The colors match Google's brand colors, and the overall structure matches what's shown in the image.

Author:
Bishnu Thapa

1 month ago

147
Upvote downvote buttons

Author:
Lucas Martinez

2 years ago

11.1k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

2 weeks ago

130
Simple dialpad

Author:
Brandon D

1 year ago

10.9k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

1 month ago

225
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

1 month ago

46
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Mohit Prajapat

1 month ago

101
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
nft card
nft card

Author:
5upreme505

7 months ago

1.2k
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

2 months ago

301

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components