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.1k

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

Basic pricing card

Author:
Sienna

2 years ago

10.6k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

4 months ago

503
Pricing Card

Author:
Amit Pachange

2 years ago

13.2k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.8k
Subscription
Subscription list

Author:
Abhiraj

7 months ago

610
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

660
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

1.8k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.3k
The future ai
The is technology

Author:
ORGIN_DREAMS

4 months ago

333
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.

Author:
Computer guy

2 years ago

8.4k
Pricing Card

Author:
Anonymous

11 months ago

1.3k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components