Home
Anonymous
Pricing Card

Pricing Card

This tailwind example is contributed by Anonymous, on 16-Oct-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Anonymous

1.2k

Fork Fullscreen

<div class="max-w-sm w-full">
  <div class="relative group">
    <div
      class="absolute -inset-1 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-200">
    </div>
    <div
      class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex flex-col items-top justify-start space-y-6">
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-gray-900">Pro Plan</span>
        <span class="px-3 py-1 text-sm text-white bg-purple-500 rounded-full">Popular</span>
      </div>
      <div class="text-5xl font-bold text-gray-900">$29<span class="text-lg font-normal text-gray-600">/mo</span>
      </div>
      <ul class="space-y-3">
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Unlimited projects
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          Advanced analytics
        </li>
        <li class="flex items-center">
          <svg class="w-5 h-5 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          24/7 Support
        </li>
      </ul>
      <button class="w-full py-3 font-bold text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition duration-300 transform hover:scale-105">
                    Choose Plan
                </button>
      <div class="absolute -top-16 right-0 -mt-4 -mr-6 w-16 h-16 float-animation">
        <img src="https://www.svgrepo.com/show/506715/fire.svg" alt="Icon" class="w-full h-full object-cover rounded-full " />
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.8k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.2k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

2 months ago

281
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.6k
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

11.4k
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

8.8k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

205
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. 🚀

Author:
Banshee

6 months ago

1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

4 months ago

514
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

2 months ago

63

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components