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

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

14.3k
partql
partql

Author:
sh22gr

1 month ago

171
Pricing card

Author:
Task Master

3 years ago

9.2k
SoungCraft
Used for making and trading songs

Author:
Frederick250

9 months ago

899
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

2 years ago

7.2k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.3k
Fancy pricing card

Author:
Laurits

3 years ago

14.1k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

933
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.9k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

2 years ago

2.9k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

4 months ago

168
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components