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

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 Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

2 years ago

6.9k
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

6 months ago

624
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

7 months ago

874
Basic pricing block

Author:
Leon Bachmann

3 years ago

7.2k
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

2 years ago

6.6k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

223
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

9 months ago

1.2k
Pricing cards

Author:
Freja Jensen

2 years ago

10.1k
Pricing card

Author:
Task Master

2 years ago

9k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.2k
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.4k
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

4 weeks ago

131

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components