Back to Discover
Tailwind CSS Pricing Card Template

Amelia
Created Nov 03, 2025
0 views
0 likes
0 comments
0 forks
Export Fork Like
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-6">
  <div x-data="{ 
               billing: 'monthly',
               plans: {
               starter: { monthly: 29, yearly: 290 },
               professional: { monthly: 79, yearly: 790 },
               enterprise: { monthly: 149, yearly: 1490 }
               }
               }" class="max-w-7xl w-full">

    <!-- Header -->
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h1>
      <p class="text-gray-600 text-lg mb-8">Choose the plan that's right for you</p>

      <!-- Billing Toggle -->
      <div class="inline-flex items-center bg-white rounded-lg p-1 shadow-sm border border-gray-200">
        <button 
                @click="billing = 'monthly'"
                :class="billing === 'monthly' ? 'bg-gray-900 text-white' : 'text-gray-600'"
                class="px-6 py-2 rounded-md transition-all duration-200 font-medium">
          Monthly
        </button>
        <button 
                @click="billing = 'yearly'"
                :class="billing === 'yearly' ? 'bg-gray-900 text-white' : 'text-gray-600'"
                class="px-6 py-2 rounded-md transition-all duration-200 font-medium">
          Yearly
          <span class="ml-2 text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Save 17%</span>
        </button>
      </div>
    </div>

    <!-- Pricing Cards -->
    <div class="grid md:grid-cols-3 gap-8">

      <!-- Starter Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <div class="mb-6">
          <h3 class="text-xl font-bold text-gray-900 mb-2">Starter</h3>
          <p class="text-gray-600 text-sm">Perfect for individuals</p>
        </div>

        <div class="mb-6">
          <span class="text-5xl font-bold text-gray-900">$<span x-text="plans.starter[billing]">29</span></span>
          <span class="text-gray-600 ml-2" x-text="billing === 'monthly' ? '/month' : '/year'"></span>
        </div>

        <button class="w-full bg-gray-900 text-white py-3 rounded-lg font-medium hover:bg-gray-800 transition-colors duration-200 mb-8">
          Get Started
        </button>

        <ul class="space-y-4">
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Up to 5 projects</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Basic analytics</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">24/7 support</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">1 team member</span>
          </li>
        </ul>
      </div>

      <!-- Professional Plan (Featured) -->
      <div class="bg-gray-900 text-white rounded-2xl shadow-xl p-8 relative transform md:scale-105 hover:shadow-2xl transition-all duration-300">
        <div class="absolute top-0 right-6 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-b-lg">
          POPULAR
        </div>

        <div class="mb-6">
          <h3 class="text-xl font-bold mb-2">Professional</h3>
          <p class="text-gray-300 text-sm">For growing teams</p>
        </div>

        <div class="mb-6">
          <span class="text-5xl font-bold">$<span x-text="plans.professional[billing]">79</span></span>
          <span class="text-gray-300 ml-2" x-text="billing === 'monthly' ? '/month' : '/year'"></span>
        </div>

        <button class="w-full bg-white text-gray-900 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors duration-200 mb-8">
          Get Started
        </button>

        <ul class="space-y-4">
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-blue-400 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span>Unlimited projects</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-blue-400 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span>Advanced analytics</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-blue-400 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span>Priority support</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-blue-400 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span>Up to 10 team members</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-blue-400 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span>Custom integrations</span>
          </li>
        </ul>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <div class="mb-6">
          <h3 class="text-xl font-bold text-gray-900 mb-2">Enterprise</h3>
          <p class="text-gray-600 text-sm">For large organizations</p>
        </div>

        <div class="mb-6">
          <span class="text-5xl font-bold text-gray-900">$<span x-text="plans.enterprise[billing]">149</span></span>
          <span class="text-gray-600 ml-2" x-text="billing === 'monthly' ? '/month' : '/year'"></span>
        </div>

        <button class="w-full bg-gray-900 text-white py-3 rounded-lg font-medium hover:bg-gray-800 transition-colors duration-200 mb-8">
          Contact Sales
        </button>

        <ul class="space-y-4">
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Everything in Professional</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Unlimited team members</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Dedicated account manager</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">Custom training</span>
          </li>
          <li class="flex items-start">
            <ion-icon name="checkmark-circle" class="text-green-500 text-xl mr-3 flex-shrink-0"></ion-icon>
            <span class="text-gray-700">SLA guarantee</span>
          </li>
        </ul>
      </div>

    </div>
  </div>
Comments (0)

No comments yet. Be the first!