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

666

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

Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

5 months ago

538
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2k
Card
Card

Author:
Aman kumar

1 year ago

1.3k
Simple pricing card
minimal pricing card

Author:
Anonymous

2 years ago

8.5k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

3.5k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

1 year ago

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

Author:
Liam Moore

2 years ago

14.6k
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

5 months ago

540
Pricing section with tailwind css

Author:
Task Master

2 years ago

11.2k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

2 years ago

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

2 years ago

9.1k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Author:
Computer guy

2 years ago

8.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components