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

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

Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.8k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

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

Author:
Rafferty Kim

2 years ago

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

10 months ago

1.6k
payement cart virtual
payement cart virtual

Author:
Omer fils ELENGA

3 days ago

12
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

2 years ago

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

Author:
Paul Intay

2 years ago

3.2k
Pricing Card

Author:
Anonymous

1 year ago

1.5k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2.2k
Pricing cards for 3 plans

Author:
Laurits

3 years ago

9.7k
Simple yet stylish pricing table

Author:
Laurits

3 years ago

9.1k
Pricing card for subscription

Author:
Task Master

3 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components