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

945

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

3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

9 months ago

946
Simple yet stylish pricing table

Author:
Laurits

3 years ago

8.9k
Card Princing

Author:
Raul antonio de la cruz hernandez

2 weeks ago

30
Pricing card with CTA

Author:
Laurits

3 years ago

10k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

2 months ago

85
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

7 months ago

1.2k
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

8 months ago

694
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

7 months ago

751
Product card

Author:
Anum Shahana

1 year ago

1.5k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

1 month ago

138
Pricing card single

Author:
Manuela Bianka

8 months ago

543

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components