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 v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author SHARIFUL ISLAM

Tailwind v3.4 2.1k 3

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

multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Computer guy

3 years ago

9.3k
Pricing Card

Amit Pachange

3 years ago

13.9k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

256
Pricing card with CTA

Laurits

3 years ago

10.4k
Simple pricing cards

S. Patel

3 years ago

11.8k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.5k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Ayyamperumal S

1 year ago

1.8k
Pricing card for subscription

Task Master

3 years ago

12k
Pricing Cards
pricing section with three subscription plans

JUGENDRA GANGWAR

2 days ago

4
Pricing table with 2 columns

Piet Vriend

3 years ago

13.5k
Price
Pricing

Jean Claude Nguetta

1 year ago

767