Pricing section - Htmlwind

Single pricing

This tailwind example is contributed by Htmlwind, on 02-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Htmlwind

Tailwind v3.4 1.3k 1

Fork Fullscreen

<div class="bg-white py-24 sm:py-32">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <div class="mx-auto max-w-4xl text-center">
      <h2 class="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">Pricing plan</h2>
      <p class="mx-auto mt-6 w-full max-w-2xl text-pretty text-xl leading-8 text-gray-600">Select from best plans, ensuring a perfect match. Need more or less? Customize your subscription for a seamless fit!</p>
    </div>
    <div class="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none lg:items-center lg:gap-x-20 lg:ring-0">
      <div class="p-2 lg:w-full lg:max-w-sm lg:shrink-0 lg:p-0">
        <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:py-16">
          <div class="mx-auto max-w-xs px-8">
            <p class="text-5xl font-semibold tracking-tight text-gray-900">$49.99</p>
            <h3 id="package-premium" class="mt-4 text-lg font-medium text-gray-900">Premium package</h3>
            <div class="mt-8 h-px bg-gray-900/5"></div>
            <p class="mt-8 text-sm leading-6 text-gray-600">Empowering your brand with standout visuals that leave an impact</p>
            <a href="#" aria-describedby="package-premium" class="mt-8 block rounded-md bg-pink-500 px-3 py-2.5 text-center text-base font-medium tracking-tight text-white shadow-sm hover:bg-pink-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-500">Get started</a>
          </div>
        </div>
      </div>
      <div class="-mt-2 p-8 sm:p-10 lg:mt-0 lg:flex-auto lg:p-0">
        <p class="text-4xl font-semibold tracking-tight text-gray-900">Process</p>
        <p class="mt-2 text-sm leading-6 text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        <ul class="mt-10 *:border-b *:border-gray-100 *:py-6">
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Discovery Session</span>
              – We delve deep into understanding your brand’s core values, goals, and target audience. Our aim is to align your brand’s identity with its visual representation.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Custom Design Concepts</span>
              – Receive three unique design concepts tailored to your brand, with opportunities for refinement and feedback to ensure the perfect fit.
            </p>
          </li>
          <li class="flex gap-x-3 first:pt-0 last:border-0 last:pb-0 sm:gap-x-6">
            <svg class="mt-2 h-5 w-5 flex-none text-pink-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <g id="Complete">
                <g id="tick">
                  <polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
                </g>
              </g>
            </svg>
            <p class="text-sm leading-6 text-gray-600">
              <span class="font-semibold text-gray-900">Deliverables</span>
              – All final design files will be provided, including various formats suitable for both digital and print use. We ensure your brand assets are ready for immediate implementation.
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Related Examples

Pricing
Looks better with in [Line-2] with: md:w-3/5

Matti

1 year ago

1.8k
3 pricing cards

Laurits

3 years ago

15.4k
payement cart virtual
payement cart virtual

Omer fils ELENGA

8 months ago

473
Pricing card
basic pricing card with single price

Kaung Htet Min

1 year ago

551
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

785
SoungCraft
Used for making and trading songs

Frederick250

1 year ago

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

Rafferty Kim

3 years ago

10.9k
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Banshee

1 year ago

2.1k
Pricing section

Leon Bachmann

3 years ago

12.9k
Horiizontal Pricing Card
Single pricing plan section

ReddRadar.com

1 year ago

1.1k
Simple pricing cards

S. Patel

3 years ago

11.8k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k