Interactive Pricing Table

This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers.

Design and Features:

✅ Elegant Gradient Backgrounds
• Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal.
• The rounded-2xl design ensures a polished and smooth aesthetic.

✅ Interactive Hover Effects
• Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]).
• Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover.

✅ Pricing & Plan Details
• Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500).
• Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models.

✅ Call-to-Action Buttons
• Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md).
• The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction.

✅ Animated Background Icons
• A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel.

This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

This tailwind example is contributed by Banshee, on 22-Jan-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are CTA,banner,Service rates, Subscription plans,Front page

Call to Action Pricing Table Button Group Landing Page

Author Banshee

Tailwind v3.4 2.1k 6

Fork Fullscreen

<div class="space-y-6 lg:px-8 mt-20 text-center group">
  <div class="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3 lg:pb-10">
    <div class="pricing-wrapper w-full relative rounded-2xl bg-gradient-to-t from-gray-300 to-white p-0.5 shadow-[0_0px_25px_0px_rgba(0,0,0,0.1)] transition-all duration-300 ease-in-out hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]">
      <div class="relative bg-white rounded-2xl p-8 text-center max-w-full w-full z-0 overflow-hidden hover:translate-y-[-5px] transition-all duration-300 ease-in-out h-full flex flex-col justify-between will-change-transform">
        <div>
          <h3 class="plan-title text-xl text-gray-800">Free Download</h3>
          <span class="plan-title text-xs relative top-[-7px] m-0 text-gray-600">get it anywhere</span>
          <p class="plan-price text-3xl my-2 font-extrabold text-indigo-500">Free</p>
          <p class="text-gray-800 mt-4 text-balance">Turn any device into a personal cloud hub at home. Always free, no strings attached.</p>
        </div>
        <a href="https://get.homedock.cloud" onClick="{handleDownloadClick}" class="checkout-button flex items-center justify-center bg-indigo-700 text-white border-none py-2.5 px-5 text-md rounded-md w-full hover:bg-indigo-500 transition-colors duration-300 mt-6">
          <span class="iconify mr-1 text-lg mb-0.5" data-icon="mdi:download" data-inline="false"></span>
          <span>Free Download</span>
        </a>
        <svg xmlns="http://www.w3.org/2000/svg" class="iconify absolute top-8 left-8 text-[500px] z-[-1] pointer-events-none text-gray-100 transition duration-1000 delay-500 group-hover:-translate-y-8 group-hover:-translate-x-8 iconify--mdi" width="1em" height="1em" viewBox="0 0 20 20">
          <path fill="currentColor" fillRule="evenodd" d="M6 2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.414A2 2 0 0 0 15.414 6L12 2.586A2 2 0 0 0 10.586 2zm5 6a1 1 0 1 0-2 0v3.586l-1.293-1.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586z" clipRule="evenodd" />
        </svg>
      </div>
    </div>

<div class="pricing-wrapper w-full relative rounded-2xl bg-gradient-to-t from-blue-300 to-white p-0.5 shadow-[0_0px_25px_0px_rgba(0,0,0,0.1)] transition-all duration-300 ease-in-out hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]">
      <div class="relative pricing-cloud rounded-2xl p-8 text-center max-w-full w-full z-0 overflow-hidden hover:translate-y-[-5px] transition-all duration-300 ease-in-out h-full flex flex-col justify-between will-change-transform">
        <div>
          <h3 class="plan-title text-xl text-gray-800">In the Cloud!</h3>
          <span class="plan-title text-xs relative top-[-7px] m-0 text-blue-600">starting at</span>
          <p class="plan-price text-3xl my-2 font-extrabold text-indigo-500">9.95€<span class="text-base text-indigo-300">/mo</span></p>
          <p class="text-gray-800 mt-4 text-balance">Unlock the power of the cloud with expanded features and storage for an all-encompassing digital journey.</p>
        </div>
        <a href="https://dashboard.homedock.cloud" onClick="{handleDownloadClick}" class="checkout-button flex items-center justify-center bg-indigo-700 text-white border-none py-2.5 px-5 text-md rounded-md w-full hover:bg-indigo-500 transition-colors duration-300 mt-6">
          <span class="iconify mr-1 text-lg mb-0.5" data-icon="mdi:cloud" data-inline="false"></span>
          <span>Get it!</span>
        </a>
        <svg xmlns="http://www.w3.org/2000/svg" class="iconify absolute top-8 left-8 text-[500px] z-[-1] pointer-events-none text-blue-100 transition duration-1000 delay-200 group-hover:-translate-y-8 group-hover:-translate-x-8 iconify--mdi" width="1em" height="1em" viewBox="0 0 24 24">
          <path fill="currentColor" fillRule="evenodd" d="M11 4.25a6.75 6.75 0 0 0-6.624 5.448A5.25 5.25 0 0 0 6.5 19.75h11a5.25 5.25 0 0 0 .02-10.5a6.75 6.75 0 0 0-6.52-5m3.53 7.28a.75.75 0 1 0-1.06-1.06L10 13.94l-1.47-1.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0z" clipRule="evenodd" />
        </svg>
      </div>
    </div>

<div class="pricing-wrapper w-full relative rounded-2xl bg-gradient-to-t from-indigo-600 to-white p-0.5 shadow-[0_0px_25px_0px_rgba(0,0,0,0.1)] transition-all duration-300 ease-in-out hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]">
      <div class="relative bg-white rounded-2xl p-8 text-center max-w-full w-full z-0 overflow-hidden hover:translate-y-[-5px] transition-all duration-300 ease-in-out h-full flex flex-col justify-between will-change-transform">
        <div>
          <h3 class="plan-title text-xl text-gray-800">Enterprise</h3>
          <span class="plan-title text-xs relative top-[-7px] m-0 text-indigo-600">contact us for info</span>
          <p class="plan-price text-3xl my-2 font-extrabold text-indigo-500">~</p>
          <p class="text-gray-800 mt-4 text-balance">Experience enterprise-level efficiency with premium support for seamless cloud operations.</p>
        </div>
        <a href="/contact/" class="checkout-button flex items-center justify-center bg-indigo-700 text-white border-none py-2.5 px-5 text-md rounded-md w-full hover:bg-indigo-500 transition-colors duration-300 mt-6">
          <span class="iconify mr-1 text-lg mb-0.5" data-icon="mdi:briefcase" data-inline="false"></span>
          <span>Contact us!</span>
        </a>
        <svg xmlns="http://www.w3.org/2000/svg" class="iconify absolute top-8 left-8 text-[500px] z-[-1] pointer-events-none text-indigo-100 transition duration-1000 delay-1000 group-hover:-translate-y-8 group-hover:-translate-x-8 iconify--mdi" width="1em" height="1em" viewBox="0 0 24 24">
          <path fill="currentColor" d="M22 13.478V18a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-4.522l.553.277a21 21 0 0 0 18.897-.002zM14 2a3 3 0 0 1 3 3v1h2a3 3 0 0 1 3 3v2.242l-1.447.724a19 19 0 0 1-16.726.186l-.647-.32l-1.18-.59V9a3 3 0 0 1 3-3h2V5a3 3 0 0 1 3-3zm-2 8a1 1 0 0 0-1 1a1 1 0 1 0 2 .01c0-.562-.448-1.01-1-1.01m2-6h-4a1 1 0 0 0-1 1v1h6V5a1 1 0 0 0-1-1" />
        </svg>
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing Table

Akshay

4 years ago

11.4k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Coastal UI

1 year ago

2.7k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Adminpanel
Three tabs, switch between each other, change color when clicked. Tables with filter, search, with a drop-down form to fill.

Alla Telegina

1 year ago

2k
Travel Landing Page: Australia

Maxim

1 year ago

2.9k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Hamza Atig

1 year ago

2k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

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

Hamza Atig

1 year ago

1.6k
The Future of Web Development
love my product

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.5k