Home
Hamza Atig
Responsive 3-Tier Pricing Card Section

Responsive 3-Tier Pricing Card Section

A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

This tailwind example is contributed by Hamza Atig, on 18-Apr-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans,simulation,copy,dummy,miniature,like

Card Pricing Table Other Mockup

Author Hamza Atig

176

Fork Fullscreen

<div class="bg-white rounded-xl p-6 sm:p-8 shadow-sm flex flex-col w-full md:w-1/3">
        
        <div class="text-center mb-4">
          <i class="fas fa-leaf text-3xl text-gray-700"></i> 
        </div>
        
        <div class="text-center mb-3">
          <h3 class="text-2xl font-semibold text-gray-900 mb-1">Basic</h3>
          <p class="text-sm text-gray-600">Get started easily</p>
        </div>
        
        <div class="text-center mb-6">
          <p class="text-4xl font-bold text-gray-900 mb-1">$0</p>
          <p class="text-xs text-gray-500">Free forever</p>
        </div>
        
        <a href="#"
          class="block w-full bg-gray-900 text-white text-center py-3 px-6 rounded-full font-semibold hover:bg-gray-700 transition duration-200 mb-6">
          Get Started
        </a>
        
        <hr class="border-gray-200 mb-6">
        
        <ul class="space-y-3 text-sm flex-grow">
          <li class="flex items-start">
            <i class="feature-checkmark"></i>
            <span class="text-gray-700">Core Feature A</span>
          </li>
          <li class="flex items-start">
            <i class="feature-checkmark"></i>
            <span class="text-gray-700">Basic Feature B</span>
          </li>
          <li class="flex items-start">
            <i class="feature-checkmark"></i>
            <span class="text-gray-700">Standard Feature C</span>
          </li>
          <li class="flex items-start">
            <i class="feature-checkmark"></i>
            <span class="text-gray-700">Limited Feature D</span>
          </li>
        </ul>
      </div>

<div class="bg-white rounded-xl p-6 sm:p-8 shadow-sm flex flex-col w-full md:w-1/3">
        
        <div class="text-center mb-4">
          <i class="fas fa-seedling text-3xl text-gray-700"></i> 
        </div>
        
        <div class="text-center mb-3">
          <h3 class="text-2xl font-semibold text-gray-900 mb-1">Standard</h3>
          <p class="text-sm text-gray-600">For regular usage</p>
        </div>
        
        <div class="text-center mb-6 min-h-[70px]">
          
          <p class="text-4xl font-bold text-gray-900 mb-1">$19</p>
          <p class="text-xs text-gray-500 leading-tight">Per month, billed annually<br>or $25 billed monthly.</p>
        </div>
        
        <a href="#"
          class="block w-full bg-gray-900 text-white text-center py-3 px-6 rounded-full font-semibold hover:bg-gray-700 transition duration-200 mb-6">
          Choose Plan
        </a>
        
        <hr class="border-gray-200 mb-6">
        
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-800 mb-4">Everything in Basic, plus:</p>
          <ul class="space-y-3 text-sm">
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Advanced Feature E</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Enhanced Feature F</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">More capacity for Feature B</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Collaboration tools</span>
            </li>
          </ul>
        </div>
      </div>

<div class="bg-white rounded-xl p-6 sm:p-8 shadow-sm flex flex-col w-full md:w-1/3">
        
        <div class="text-center mb-4">
          <i class="fas fa-tree text-3xl text-gray-700"></i> 
        </div>
        
        <div class="text-center mb-3">
          <h3 class="text-2xl font-semibold text-gray-900 mb-1">Premium</h3>
          <p class="text-sm text-gray-600">For power users & teams</p>
        </div>
        
        <div class="text-center mb-6 min-h-[70px]">
          
          <p class="text-4xl font-bold text-gray-900 mb-1">From $99</p>
          <p class="text-xs text-gray-500 leading-tight">Per user / month<br>Volume discounts available.</p>
        </div>
        
        <a href="#"
          class="block w-full bg-gray-900 text-white text-center py-3 px-6 rounded-full font-semibold hover:bg-gray-700 transition duration-200 mb-6">
          Contact Us
        </a>
        
        <hr class="border-gray-200 mb-6">
        
        <div class="flex-grow">
          <p class="text-sm font-medium text-gray-800 mb-4">Everything in Standard, plus:</p>
          <ul class="space-y-3 text-sm">
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Unlimited Feature A & B</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Dedicated Support</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Advanced Security Options</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Custom Integrations</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Early access to new features</span>
            </li>
            <li class="flex items-start">
              <i class="feature-checkmark"></i>
              <span class="text-gray-700">Priority processing</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

Related Examples

Pricing Table

Author:
Akshay

2 years ago

10.3k
Show credit card details

Author:
Manuela Bianka

2 years ago

11.7k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

10.2k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

12.1k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.7k
cards
cards with background animation

Author:
Anonymous

1 year ago

10.6k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

13.1k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

3.3k
cards
cards with background animation

Author:
Anonymous

1 year ago

2.3k
Card
Card

Author:
Aman kumar

11 months ago

1.8k
Card
Card

Author:
Aman kumar

11 months ago

1.1k
Invoice
Invoice

Author:
Ameth Galarcio

11 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components