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 v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Rajesh Maheshwari

Tailwind v3.4 1.5k 4

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 Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

SHARIFUL ISLAM

1 year ago

2.1k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Product / Service pricing section

Sophia Baker

3 years ago

13.2k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Andreas Ludvigsson

2 years ago

4.1k
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
Pricing Table
Modern and visually appealing design

Prajwal Hallale

3 years ago

7k
Pricing Plans

ariaw

1 year ago

634
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Basic Pricing Cards
highlight and promote different product or service plans

Anonymous

2 years ago

7.7k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

8 months ago

911
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Hamza Atig

1 year ago

1.7k