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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Emrys11

Tailwind v3.4 1.5k 6

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

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

bara masalma

1 year ago

1.4k
Pricing card

Task Master

3 years ago

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

Mereani Waqa

2 years ago

10.2k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

1 month ago

25
Pricing Card

Amit Pachange

3 years ago

13.9k
Pricing cards in pair

Nour Haider

3 years ago

14.9k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Anonymous

2 years ago

7.9k
Price
Pricing

Jean Claude Nguetta

11 months ago

722
Modern pricing cards
Minimal and clean pricing cards

Paul Intay

1 year ago

1.8k
Simple pricing card
minimal pricing card

Anonymous

3 years ago

9.7k
Pricing section with tailwind css

Task Master

3 years ago

12k