Home
AKASH GANDHAR
Tailwind Pricing Section

Tailwind Pricing Section

Fully Responsive Pricing Section

This tailwind example is contributed by AKASH GANDHAR, on 11-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Header Hero

Author AKASH GANDHAR

1.4k

Fork Fullscreen

<section class="px-8 py-24">
  <div class="container mx-auto text-center">
    <h2 class="block antialiased tracking-normal font-sans text-4xl font-semibold leading-[1.3] text-blue-gray-900 mb-4">Pricing</h2>
    <p class="block antialiased font-sans text-base leading-relaxed text-inherit mb-8 font-normal !text-gray-500">Check out our affordable pricing options for delicious meals.</p>
  </div>
  <div class="mt-24">
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      <div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md border border-blue-gray-100">
        <div class="relative bg-clip-border mt-4 mx-4 rounded-xl overflow-hidden bg-transparent text-gray-700 shadow-none !m-0 p-6">
          <h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900 capitalize">Basic Meal Plan</h5>
          <p class="block antialiased font-sans text-sm leading-normal text-inherit font-normal !text-gray-500">Enjoy a daily meal with our basic plan.</p>
          <h3 class="antialiased tracking-normal font-sans text-3xl font-semibold leading-snug text-blue-gray-900 flex gap-1 mt-4">$9.99<span class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 -translate-y-0.5 self-end opacity-70"></span></h3>
        </div>
        <div class="p-6 border-t border-blue-gray-50">
          <ul class="flex flex-col gap-3">
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Breakfast</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Lunch</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Dinner</p>
            </li>
          </ul><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-green-500 text-green-500 hover:opacity-75 focus:ring focus:ring-green-200 active:opacity-[0.85] block w-full mt-6" type="button">buy now</button>
        </div>
      </div>
      <div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md border border-blue-gray-100">
        <div class="relative bg-clip-border mt-4 mx-4 rounded-xl overflow-hidden bg-transparent text-gray-700 shadow-none !m-0 p-6">
          <h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900 capitalize">Family Feast</h5>
          <p class="block antialiased font-sans text-sm leading-normal text-inherit font-normal !text-gray-500">A feast for the whole family to enjoy together.</p>
          <h3 class="antialiased tracking-normal font-sans text-3xl font-semibold leading-snug text-blue-gray-900 flex gap-1 mt-4">$29.99<span class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 -translate-y-0.5 self-end opacity-70"></span></h3>
        </div>
        <div class="p-6 border-t border-blue-gray-50">
          <ul class="flex flex-col gap-3">
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Appetizers</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Main Course</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Dessert</p>
            </li>
          </ul><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-green-500 text-green-500 hover:opacity-75 focus:ring focus:ring-green-200 active:opacity-[0.85] block w-full mt-6" type="button">buy now</button>
        </div>
      </div>
      <div class="relative flex flex-col bg-clip-border rounded-xl bg-white text-gray-700 shadow-md border border-blue-gray-100">
        <div class="relative bg-clip-border mt-4 mx-4 rounded-xl overflow-hidden bg-transparent text-gray-700 shadow-none !m-0 p-6">
          <h5 class="block antialiased tracking-normal font-sans text-xl font-semibold leading-snug text-blue-gray-900 capitalize">Special Events</h5>
          <p class="block antialiased font-sans text-sm leading-normal text-inherit font-normal !text-gray-500">Customized menu options for your special occasions.</p>
          <h3 class="antialiased tracking-normal font-sans text-3xl font-semibold leading-snug text-blue-gray-900 flex gap-1 mt-4">Contact us for a quote<span class="block antialiased tracking-normal font-sans text-base font-semibold leading-relaxed text-blue-gray-900 -translate-y-0.5 self-end opacity-70"></span></h3>
        </div>
        <div class="p-6 border-t border-blue-gray-50">
          <ul class="flex flex-col gap-3">
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Customized Menu</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Event Planning</p>
            </li>
            <li class="flex items-center gap-3 text-gray-700"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="h-4 w-4 text-blue-gray-900">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path>
              </svg>
              <p class="block antialiased font-sans text-sm leading-normal font-normal text-inherit">Professional Service</p>
            </li>
          </ul><button class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-2 px-4 rounded-lg border border-green-500 text-green-500 hover:opacity-75 focus:ring focus:ring-green-200 active:opacity-[0.85] block w-full mt-6" type="button">buy now</button>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

App Hero Section With header

Author:
Abdul Baset Bappy

3 weeks ago

258
Divine Shree Ram Hero Section | Tailwind CSS Responsive UI for Devotional |Hero section |Hero
Explore a stunning and responsive Hero Section dedicated to Lord Ram, crafted with Tailwind CSS. Perfect for spiritual brands, Ramayana-inspired products, or devotional e-commerce platforms. Fully responsive, dark mode compatible, and animation-rich UI.

Author:
Rajesh Pandey

1 month ago

281
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 month ago

361
Cyamunara
used to sell everything someone need to sell

Author:
INGRIDE MUZIRANENGE

1 month ago

62
Banner - Hero - Splash Section

Author:
ABDO-SY

4 months ago

681
Hero Section
Modern Gradient Color Scheme - Uses a professional purple-to-teal gradient for visual appeal Animated Elements: Floating decorative circles with subtle animation Fade-in effect for the main illustration Pulsing status indicator Engaging Typography: Gradient text for key phrases Responsive font sizing Clean Poppins font family Social Proof Elements: Client avatars Star ratings Trust indicators ("Trusted by 500+ businesses") Call-to-Action Buttons: Primary gradient button Secondary outlined button Hover effects and transitions Visual Hierarchy: Clear headline with emphasis on transformation Supporting subheading Balanced layout with image Performance Indicators: ROI badge Growth metric badge Responsive Design: Works on mobile and desktop Grid layout that adapts to screen size

Author:
KULDEEP

1 week ago

102
Modern Website Header & Footer
I created a professional header and footer using HTML and Tailwind CSS with modern design elements, smooth animations, and interactive features.

Author:
Rathanak Phan

1 month ago

215
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

3.8k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

11 months ago

2.9k
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

6.9k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

11 months ago

1.5k
Advance Designed hero section
We create a Advance animated hero section using tailwindcss and custom css

Author:
Akram Khan

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components