Home
Prajwal Hallale
Pricing Table

Pricing Table

Modern and visually appealing design

This tailwind example is contributed by Prajwal Hallale, on 07-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Prajwal Hallale

6.9k

Fork Fullscreen

<div class="bg-gray-100 py-12">
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex flex-wrap -mx-4">
      
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h2 class="text-2xl font-semibold text-gray-800">Basic Plan</h2>
          <div class="mt-4">
            <span class="text-5xl font-bold text-gray-900">$19</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="mt-6 space-y-2">
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Unlimited Access
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              24/7 Customer Support
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Premium Features
            </li>
          </ul>
          <div class="mt-8">
            <a href="#" class="block w-full bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-center py-2 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">Get Started</a>
          </div>
        </div>
      </div>
      
      
      <div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h2 class="text-2xl font-semibold text-gray-800">Pro Plan</h2>
          <div class="mt-4">
            <span class="text-5xl font-bold text-gray-900">$39</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="mt-6 space-y-2">
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Unlimited Access
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              24/7 Customer Support
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Premium Features
            </li>
          </ul>
          <div class="mt-8">
            <a href="#" class="block w-full bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-center py-2 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">Get Started</a>
          </div>
        </div>
      </div>

<div class="w-full sm:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="bg-white p-6 rounded-lg shadow-lg">
          <h2 class="text-2xl font-semibold text-gray-800">Premium Plan</h2>
          <div class="mt-4">
            <span class="text-5xl font-bold text-gray-900">$79</span>
            <span class="text-gray-600">/month</span>
          </div>
          <ul class="mt-6 space-y-2">
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Unlimited Access
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              24/7 Customer Support
            </li>
            <li class="flex items-center">
              <svg class="h-6 w-6 text-green-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              Premium Features
            </li>
          </ul>
          <div class="mt-8">
            <a href="#" class="block w-full bg-indigo-500 hover:bg-indigo-400 text-white font-semibold text-center py-2 rounded-lg transition duration-300 ease-in-out transform hover:scale-105">Get Started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing cards in pair

Author:
Nour Haider

2 years ago

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

Author:
Leon Bachmann

2 years ago

10.9k
Basic pricing block

Author:
Leon Bachmann

2 years ago

7.1k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

10 months ago

963
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.4k
Subscription
Subscription list

Author:
Abhiraj

7 months ago

611
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

1 month ago

248
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

9 months ago

906
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.5k
Pricing Card with Toggle

Author:
Paul Intay

9 months ago

921
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

3 months ago

404
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

7 months ago

661

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components