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

2 years ago

11.4k
Simple pricing cards

Author:
S. Patel

2 years ago

10.9k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

2 years ago

14k
Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

12.7k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
SoungCraft
Used for making and trading songs

Author:
Frederick250

5 months ago

543
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:
bara masalma

10 months ago

992
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.8k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Christian Ahlin

11 months ago

2k
Pricing section

Author:
Leon Bachmann

2 years ago

12.2k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

4 months ago

693
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components