Home
Emrys11
Pricing Section

Pricing Section

Blue-themed pricing cards with beautiful UI

This tailwind example is contributed by Emrys11, on 14-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Emrys11

342

Fork Fullscreen

<body class="bg-light-blue dark:bg-dark-blue">
  <div class="container mx-auto p-8">
    <h2 class="text-3xl font-bold text-center text-gray-800 dark:text-white mb-10">
      Our Pricing Plans
    </h2>

<div
      class="grid grid-cols-1 md:grid-cols-3 gap-8 peer-hover-plan2:bg-blue-50 dark:peer-hover-plan2:bg-gray-700 transition-colors duration-500 ease-in-out">
      
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Basic</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">For individuals</p>
        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-6">
          $19<span class="text-lg text-gray-600 dark:text-gray-300">/month</span>
        </div>
        <ul>
          <li class="text-gray-600 dark:text-gray-300 mb-2">10 Projects</li>
          <li class="text-gray-600 dark:text-gray-300 mb-2">5GB Storage</li>
          <li class="text-gray-600 dark:text-gray-300 mb-2">Basic Support</li>
        </ul>
        <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition-colors">
                    Choose Plan
                </button>
      </div>

<div
        class="peer peer-hover:bg-blue-700 dark:peer-hover:bg-gray-600 group bg-blue-500 dark:bg-gray-700 rounded-lg shadow-2xl p-6 relative hover:shadow-xl transition-shadow">
        <span class="absolute top-0 right-0 bg-yellow-400 text-white px-3 py-1 rounded-tl-lg rounded-br-lg text-sm font-semibold">
                    Most Popular
                </span>
        <h3 class="text-xl font-semibold text-white mb-2">Pro</h3>
        <p class="text-gray-200 mb-4">For growing teams</p>
        <div class="text-4xl font-bold text-white mb-6">
          $49<span class="text-lg text-gray-200">/month</span>
        </div>
        <ul>
          <li class="text-gray-200 mb-2">50 Projects</li>
          <li class="text-gray-200 mb-2">25GB Storage</li>
          <li class="text-gray-200 mb-2">Premium Support</li>
        </ul>
        <button class="mt-6 w-full bg-white hover:bg-gray-100 text-blue-600 font-bold py-2 px-4 rounded-md transition-colors group-hover:bg-blue-500 group-hover:text-white dark:group-hover:bg-blue-400 dark:group-hover:text-white">
                    Choose Plan
                </button>
      </div>

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Enterprise</h3>
        <p class="text-gray-600 dark:text-gray-300 mb-4">For large organizations</p>
        <div class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-6">
          $99<span class="text-lg text-gray-600 dark:text-gray-300">/month</span>
        </div>
        <ul>
          <li class="text-gray-600 dark:text-gray-300 mb-2">Unlimited Projects</li>
          <li class="text-gray-600 dark:text-gray-300 mb-2">100GB Storage</li>
          <li class="text-gray-600 dark:text-gray-300 mb-2">24/7 Support</li>
        </ul>
        <button class="mt-6 w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-md transition-colors">
                    Choose Plan
                </button>
      </div>
    </div>
  </div>

Related Examples

Simple pricing cards

Author:
S. Patel

1 year ago

9.6k
Pricing card
Reveal details on hover

Author:
Anonymous

10 months ago

2.4k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Author:
Kennedy Mills

1 year ago

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

Author:
SHARIFUL ISLAM

5 days ago

27
Fancy pricing card

Author:
Laurits

2 years ago

12.2k
Pricing card for subscription

Author:
Task Master

2 years ago

9.9k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

8.3k
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

7.8k
Pricing cards in pair

Author:
Nour Haider

1 year ago

12.4k
Card
Card

Author:
Aman kumar

7 months ago

1.6k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

1 year ago

13.4k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

11 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components