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 v3.4. 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

Tailwind v3.4 982 2

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

Akshay

4 years ago

11.4k
Show credit card details

Manuela Bianka

3 years ago

13.2k
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 comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
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