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.2k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.3k
PLAN SECTION

Author:
ABDO-SY

4 months ago

467
Pricing card

Author:
Sophia Baker

2 years ago

8.4k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

3 months ago

664
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

8 months ago

586
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

2 months ago

116
Basic pricing block

Author:
Leon Bachmann

2 years ago

7.1k
The future ai
The is technology

Author:
ORGIN_DREAMS

2 months ago

284
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

7 months ago

840
Fancy pricing card

Author:
Laurits

2 years ago

13.3k
Card
Card

Author:
Aman kumar

1 year ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components