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

Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k
Horizontal Pricing Card

Mereani Waqa

2 years ago

6.2k
Pricing Plans UI
A modern, responsive pricing plan cards

EliteAI Tools

1 year ago

1.9k
Pricing Plans
Js integrated Pricing Plans

ORGIN_DREAMS

1 year ago

1.4k
partql
partql

sh22gr

7 months ago

779
Pricing section with tailwind css

Task Master

3 years ago

12k
Pricing card single

Manuela Bianka

1 year ago

878
Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.6k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Ahmath S.

1 year ago

965
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
Minimalist Pricing Section
A minimal but nice pricing section.

VoltagedDev

2 years ago

2.8k
Simple yet stylish pricing table

Laurits

3 years ago

10k