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

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

Semi transparent pricing cards

Author:
Anonymous

2 years ago

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

8 months ago

824
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

143
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

3.8k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

9 months ago

722
Pricing card

Author:
Task Master

3 years ago

9.2k
"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

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

Author:
Anonymous

2 years ago

7.1k
Product / Service pricing section

Author:
Sophia Baker

3 years ago

12.8k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

232
Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

13.1k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Author:
Rathanak Phan

9 months ago

2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components