Pricing Plans

This tailwind example is contributed by ariaw, on 08-Sep-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Card Pricing Other

Author ariaw

Tailwind v3.4 632

Fork Fullscreen

<div class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4">
  <section class="mx-auto w-full max-w-7xl px-4 py-12">
    <div class="mb-16 text-center">
      <h2 class="mb-4 text-4xl font-bold text-gray-800 md:text-5xl">Pricing Plans</h2>
      <p class="mx-auto max-w-2xl text-lg text-gray-600">Choose the perfect plan for your needs. All plans include our core features with options to scale as you grow.</p>
    </div>

<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      
      <div class="flex transform flex-col rounded-xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:-translate-y-2 hover:border-black">
        <div class="mb-8">
          <h3 class="mb-2 text-2xl font-bold">Basic</h3>
          <div class="flex items-baseline">
            <span class="text-4xl font-bold">$19</span>
            <span class="ml-1 text-gray-500">/month</span>
          </div>
        </div>

<ul class="mb-8 flex-grow space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Single User</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>5GB Storage</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Unlimited Public Projects</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Community Access</span>
          </li>
          <li class="flex items-center text-gray-400">
            <i class="fas fa-times mr-3 text-red-400"></i>
            <span>Private Projects</span>
          </li>
          <li class="flex items-center text-gray-400">
            <i class="fas fa-times mr-3 text-red-400"></i>
            <span>Dedicated Support</span>
          </li>
        </ul>

<div class="relative flex transform flex-col rounded-xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:-translate-y-2 hover:border-black">
        <div class="mb-8">
          <h3 class="mb-2 text-2xl font-bold">Pro</h3>
          <div class="flex items-baseline">
            <span class="text-4xl font-bold">$49</span>
            <span class="ml-1 text-gray-500">/month</span>
          </div>
        </div>

<ul class="mb-8 flex-grow space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>5 Users</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>50GB Storage</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Unlimited Public Projects</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Community Access</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Private Projects</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Dedicated Support</span>
          </li>
        </ul>

<div class="flex transform flex-col rounded-xl border border-gray-200 bg-white p-8 transition-all duration-300 hover:-translate-y-2 hover:border-black">
        <div class="mb-8">
          <h3 class="mb-2 text-2xl font-bold">Enterprise</h3>
          <div class="flex items-baseline">
            <span class="text-4xl font-bold">$99</span>
            <span class="ml-1 text-gray-500">/month</span>
          </div>
        </div>

<ul class="mb-8 flex-grow space-y-4">
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Unlimited Users</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>500GB Storage</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Unlimited Public Projects</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Community Access</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Private Projects</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Dedicated Support</span>
          </li>
          <li class="flex items-center">
            <i class="fas fa-check mr-3 text-green-500"></i>
            <span>Advanced Analytics</span>
          </li>
        </ul>

<div class="mt-16 text-center text-gray-600">
      <p class="mb-4">All plans come with a 14-day money-back guarantee.</p>
      <p>Need something custom? <a href="#" class="font-semibold text-black hover:underline">Contact us</a></p>
    </div>
  </section>
</div>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
cards
cards with background animation

Anonymous

3 years ago

11.9k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
cards
cards with background animation

Anonymous

2 years ago

3.8k
Card
Card

Aman kumar

2 years ago

3k
Card
Card

Aman kumar

2 years ago

2.2k
Invoice
Invoice

Ameth Galarcio

2 years ago

3.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Ameth Galarcio

2 years ago

4.1k
Payment Cards

Shammi Nethupul

2 years ago

3k