Home
Banshee
Interactive Pricing Table

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 CSS v3. 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

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

Author:
Akshay

2 years ago

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

Author:
Andreas Wagner

1 year ago

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

Author:
Coastal UI

3 months ago

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

Author:
Christian Ahlin

1 month ago

271
Pricing Card

Author:
Anonymous

3 months ago

665
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:
bara masalma

1 month ago

221
Call to action

Author:
Leon Bachmann

1 year ago

7.6k
Banner for app download
Show App Download Buttons for the App Store and Play Store

Author:
Pixel Perfect

6 months ago

770
Product review card

Author:
Moriba Traore

2 years ago

14.1k
Call to action component
Start your free 7-day trial Call to action button

Author:
S. Patel

1 year ago

6.9k
Datatable
Datatable example with datatable.js with search, sort, pagination

Author:
R.P Ketan

1 year ago

22.1k
Call to action section with image

Author:
Steven Kuhn

2 years ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components