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

849

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

Simple pricing card
minimal pricing card

Author:
Anonymous

2 years ago

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

Author:
Leon Bachmann

2 years ago

10.9k
Pricing Table

Author:
Akshay

3 years ago

10.8k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.9k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

7 months ago

1.1k
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

1 year ago

2.7k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

10k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13.6k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.4k
Clean pricing cards

Author:
Freja Jensen

2 years ago

8.1k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

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

7 months ago

990

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components