Home
SHARIFUL ISLAM
Pricing Table

Pricing Table

A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

This tailwind example is contributed by SHARIFUL ISLAM, on 17-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author SHARIFUL ISLAM

1.7k

Fork Fullscreen

<div class="flex items-center justify-center h-screen">
<div class="flex">
  <div class="border border-gray-300 rounded-[20px] p-[clamp(20px,2.5vw,30px)] flex flex-col justify-between w-[310px] bg-white transition-transform ease-in-out duration-700 delay-200 opacity-100 translate-x-0">
  <div class="space-y-[clamp(8px,2.5vw,10px)]">
    <div class="flex gap-2 items-center">
      <span class="font-bold text-black text-[clamp(30px,2.5vw,45px)]">$95</span>
      <span class="line-through text-gray-500 text-[clamp(15px,2.5vw,20px)]">$100</span>
    </div>
    <div class="space-y-[clamp(15px,2.5vw,20px)]">
      <div class="space-y-2.5">
        <h1 class="font-semibold text-[clamp(20px,2.5vw,27px)]">Commercial</h1>
        <p class="text-gray-500 text-[clamp(12px,2.5vw,15px)]">For most businesses that want to optimize web queries</p>
      </div>
      <ul class="space-y-2.5">
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Customer Panel</span>
        </li>
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Admin Panel</span>
        </li>
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Mega Menu</span>
        </li>
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Quick View</span>
        </li>
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Quick Order</span>
        </li>
        <li class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
          <span class="text-gray-600 text-base">Live Message</span>
        </li>
      </ul>
      <div class="bg-green-500 text-white rounded-full flex items-center justify-center py-1 px-4 w-min text-sm font-medium">Included</div>
      <div class="flex items-center gap-2.5">
        <div class="rounded-full w-[18px] h-[18px] bg-green-500 flex items-center justify-center text-white text-xs font-bold">✔</div>
        <span class="text-gray-600 text-base">Commercial use permission</span>
      </div>
    </div>
  </div>
  <button class="mt-5 w-full py-3 bg-green-600 text-white text-lg font-medium rounded-full flex items-center justify-center gap-2 hover:bg-green-700 transition">
    <span class="text-white">🛒</span> Purchase Now
  </button>
</div>
<div
  class="md:-ml-5 border border-black-10 rounded-[20px] p-[clamp(20px,2.5vw,30px)] flex justify-between flex-col w-[310px] h-[580px] transition-transform duration-700 ease-in-out delay-200 bg-gradient-to-r from-purple-500 to-indigo-500 opacity-100 translate-x-0"
>
  <div class="space-y-[clamp(8px,2.5vw,10px)] text-white">
    <div class="flex gap-2 items-center">
      <span class="font-bold text-[clamp(30px,2.5vw,45px)]">$50</span>
      <span class="line-through text-[clamp(15px,2.5vw,20px)]">$60</span>
    </div>
    <div class="space-y-[clamp(15px,2.5vw,20px)]">
      <div class="space-y-2.5">
        <h1 class="font-semibold text-[clamp(20px,2.5vw,27px)]">Personal</h1>
        <p class="text-[clamp(12px,2.5vw,15px)]">For most businesses that want to optimize web queries</p>
      </div>
      
      <div class="space-y-2.5">
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Customer Panel</span>
        </div>
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Admin Panel</span>
        </div>
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Mega Menu</span>
        </div>
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Quick View</span>
        </div>
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Quick Order</span>
        </div>
        <div class="flex items-center gap-2.5">
          <div class="rounded-full w-[18px] h-[18px] bg-white flex items-center justify-center">
            ✅
          </div>
          <span class="text-base">Live Message</span>
        </div>
      </div>
    </div>
  </div>

<button class="font-medium mt-5 text-black justify-center px-5 py-2 bg-white rounded-full flex items-center gap-2 group transition duration-300 hover:bg-indigo-600">
      🛍️
    <span class="text-primary text-[clamp(12px,2.5vw,16px)] group-hover:text-white">Purchase Now</span>
  </button>
</div>

</div>
</div>

Related Examples

Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

3 years ago

11.2k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

10 months ago

757
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

2 years ago

4.3k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

7 months ago

822
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

3k
Pricing card

Author:
Sophia Baker

3 years ago

8.6k
Pricing cards in pair

Author:
Nour Haider

2 years ago

14k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

1 month ago

80
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

2 years ago

11.7k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

2 months ago

165
Pricing Table

Author:
Akshay

3 years ago

11k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

1 year ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components