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

111

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