Home
Rajesh Maheshwari
Pricing Card

Pricing Card

A responsive pricing card build using html and tailwind css

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Rajesh Maheshwari

772

Fork Fullscreen

<div id="pricing" class="py-20 md:px-20 lg:px-20 bg-black">
  <div class="container mx-auto px-4">
    <div class="mb-12 text-center">
      <h3 class="text-purple-400" data-aos="fade-down">Pricing Plans</h3>
      <h2 class="text-white text-[30px] font-bold" data-aos="fade-down">
        Choose Your Perfect Package
      </h2>
      <p class="mx-auto mt-4 max-w-2xl text-gray-400" data-aos="fade-down">
        Select from our carefully curated photography packages designed to
        meet your specific needs and budget.
      </p>
    </div>

<div class="relative bg-[#1A1A1A] border-gray-800 p-6 rounded-xl">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-white">
            Basic Package
          </h3>
          <div class="mt-4 text-center">
            <span class="text-4xl text-violet-400 font-bold">
              &#8377;499
            </span>
            <span class="text-gray-400">/session</span>
          </div>
        </div>
        <div class="mt-6">
          <ul class="mb-8 space-y-4">
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">2 Hour Photo Session</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">50 Digital Images</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Online Gallery</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Basic Editing</span>
            </li>
          </ul>
          <span
            class="cursor-pointer w-full py-3 px-6 text-center text-white font-semibold rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 shadow-lg hover:from-purple-600 hover:to-indigo-600 transition duration-300 ease-in-out transform hover:scale-105"
          >
            Choose Plan
          </span>
        </div>
      </div>

<div class="relative bg-violet-900/20 backdrop-blur-lg rounded-2xl border-2 border-violet-500 hover:transform hover:-translate-y-2 transition-all duration-300">
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-purple-600 px-3 py-1 text-white text-sm font-semibold">
          Most Popular
        </div>
        <div class="text-center p-6">
          <h3 class="text-2xl font-bold text-white">
            Premium Package
          </h3>
          <div class="mt-4 text-center">
            <span class="text-4xl text-violet-400 font-bold">
              &#8377;899
            </span>
            <span class="text-gray-400">/session</span>
          </div>
        </div>
        <div class="px-4 pb-8">
          <ul class="mb-8 space-y-4">
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">4 Hour Photo Session</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">100 Digital Images</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Online Gallery</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Advanced Editing</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Print Release</span>
            </li>
          </ul>
          <span
            class="cursor-pointer w-full py-3 px-6 text-center text-white font-semibold rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 shadow-lg hover:from-purple-600 hover:to-indigo-600 transition duration-300 ease-in-out transform hover:scale-105"
          >
            Choose Plan
          </span>
        </div>
      </div>

<div class="relative bg-[#1A1A1A] border-gray-800 p-6 rounded-xl">
        <div class="text-center">
          <h3 class="text-2xl font-bold text-white">
            Professional Package
          </h3>
          <div class="mt-4 text-center">
            <span class="text-3xl text-violet-400 font-bold">
              &#8377;1499
            </span>
            <span class="text-gray-400">/session</span>
          </div>
        </div>
        <div class="mt-6">
          <ul class="mb-8 space-y-4">
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Full Day Coverage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Unlimited Images</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Premium Online Gallery</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Premium Editing</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-2 h-5 w-5 text-purple-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M9 12l2 2 4-4"></path></svg>
              <span class="text-white">Photo Album</span>
            </li>
          </ul>
          <span
            class="cursor-pointer w-full py-3 px-6 text-center text-white font-semibold rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 shadow-lg hover:from-purple-600 hover:to-indigo-600 transition duration-300 ease-in-out transform hover:scale-105"
          >
            Choose Plan
          </span>
        </div>
      </div>

</div>
  </div>
</div>

Related Examples

Pricing card

Author:
Sophia Baker

2 years ago

8.6k
Simple pricing cards

Author:
S. Patel

2 years ago

10.9k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

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

7 months ago

895
Minimal pricing card design

Author:
Anonymous

2 years ago

7.4k
Basic pricing card

Author:
Sienna

2 years ago

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

4 months ago

669
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

3k
3 pricing cards

Author:
Laurits

3 years ago

14.4k
Pricing table

Author:
Laurits

2 years ago

10.3k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

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

Author:
Leon Bachmann

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components