Home
Andreas Ludvigsson
Pricing table

Pricing table

Sleek and Modern Pricing Table with Hover Effects

This tailwind example is contributed by Andreas Ludvigsson, on 11-Mar-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 Andreas Ludvigsson

Fork Fullscreen

<section class="bg-gray-900 py-12">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-4xl font-extrabold text-white sm:text-5xl">
        Pricing Plans
      </h2>
      <p class="mt-4 text-xl text-gray-400">
        Simple, transparent pricing for your business needs.
      </p>
    </div>

<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
      
      <div class="bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">
        <div class="mb-8">
          <h3 class="text-2xl font-semibold text-white">Free</h3>
          <p class="mt-4 text-gray-400">Get started with our basic features.</p>
        </div>
        <div class="mb-8">
          <span class="text-5xl font-extrabold text-white">$0</span>
          <span class="text-xl font-medium text-gray-400">/mo</span>
        </div>
        <ul class="mb-8 space-y-4 text-gray-400">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>1 user account</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>10 transactions per month</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Basic support</span>
          </li>
        </ul>
        <a href="#" class="block w-full py-3 px-6 text-center rounded-md text-white font-medium bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
          Sign Up
        </a>
      </div>

<div class="bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">
        <div class="mb-8">
          <h3 class="text-2xl font-semibold text-white">Starter</h3>
          <p class="mt-4 text-gray-400">Perfect for small businesses and startups.</p>
        </div>
        <div class="mb-8">
          <span class="text-5xl font-extrabold text-white">$49</span>
          <span class="text-xl font-medium text-gray-400">/mo</span>
        </div>
        <ul class="mb-8 space-y-4 text-gray-400">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>5 user accounts</span>
          </li>
           <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>100 transactions per month</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Standard support</span>
          </li>
        </ul>
        <a href="#" class="block w-full py-3 px-6 text-center rounded-md text-white font-medium bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
          Get Started
        </a>
      </div>

<div class="bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">
        <div class="mb-8">
          <h3 class="text-2xl font-semibold text-white">Pro</h3>
          <p class="mt-4 text-gray-400">Ideal for growing businesses and enterprises.</p>
        </div>
        <div class="mb-8">
          <span class="text-5xl font-extrabold text-white">$99</span>
          <span class="text-xl font-medium text-gray-400">/mo</span>
        </div>
        <ul class="mb-8 space-y-4 text-gray-400">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Unlimited user accounts</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Unlimited transactions</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Priority support</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Advanced analytics</span>
          </li>
        </ul>
        <a href="#" class="block w-full py-3 px-6 text-center rounded-md text-white font-medium bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
          Get Started
        </a>
      </div>

<div class="bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition duration-300">
        <div class="mb-8">
          <h3 class="text-2xl font-semibold text-white">Enterprise</h3>
          <p class="mt-4 text-gray-400">Tailored for large-scale deployments and custom needs.</p>
        </div>
        <div class="mb-8">
          <span class="text-5xl font-extrabold text-white">Custom</span>
        </div>
        <ul class="mb-8 space-y-4 text-gray-400">
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Dedicated infrastructure</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Custom integrations</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Dedicated support team</span>
          </li>
          <li class="flex items-center">
            <svg class="h-6 w-6 text-green-500 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
            </svg>
            <span>Premium SLAs</span>
          </li>
        </ul>
        <a href="#" class="block w-full py-3 px-6 text-center rounded-md text-white font-medium bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
          Contact Sales
        </a>
      </div>
    </div>
  </div>
</section>

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

Author:
Elsabe Fourie

1 year ago

10.2k
Simple pricing cards

Author:
S. Patel

2 years ago

9.7k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.4k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

5 days ago

9
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

8.2k
Fancy pricing card

Author:
Laurits

2 years ago

12.6k
Services
explore our awesome Services

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

11 months ago

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

1 week ago

20
Pricing card with CTA

Author:
Laurits

2 years ago

9k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

10 months ago

2.3k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

8.9k
Pricing cards in pair

Author:
Nour Haider

1 year ago

12.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components