Home
Computer guy
Product Pricing Section

Product Pricing Section

This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

This tailwind example is contributed by Computer guy, on 01-Oct-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Computer guy

7.6k

Fork Fullscreen

<div class="bg-gray-700 px-4 py-16 min-h-screen">
  <div aria-hidden="true" class="absolute inset-0 h-max w-full m-auto grid grid-cols-2 -space-x-52 opacity-20">
    <div class="blur-[106px] h-56 bg-gradient-to-br to-purple-400 from-blue-700"></div>
    <div class="blur-[106px] h-32 bg-gradient-to-r from-cyan-400 to-indigo-600"></div>
  </div>
  <div class="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
    <div class="mb-10 space-y-4 px-6 md:px-0">
      <h2 class="text-center text-2xl font-bold text-white sm:text-3xl md:text-4xl">Pricing</h2>
    </div>
    <div class="flex flex-col sm:flex-row justify-center gap-4">
      <div
        class="flex flex-col items-center aspect-auto p-4 sm:p-8 border rounded-3xl bg-gray-800 border-gray-700 shadow-gray-600/10 shadow-none m-2 flex-1 max-w-md">
        <h2 class="text-lg sm:text-xl font-medium text-white mb-2">Starter</h2>
        <p class="text-lg sm:text-xl text-center mb-8 mt-4 text-gray-400">
          <span class="text-3xl sm:text-4xl font-bold text-white">$19</span> / Month
        </p>
        <ul class="list-none list-inside mb-6 text-center text-gray-300">
          <li class="font-bold text-orange-600">1 Website</li>
          <li>Custom Domain</li>
          <li>Basic SEO</li>
          <li>Limited Support</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer"
          class="lemonsqueezy-button relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          href="https://example.com/starter-plan"><span class="relative text-sm font-semibold text-black">Get Started</span></a>
      </div>
      <div
        class="flex flex-col items-center aspect-auto p-4 sm:p-8 border rounded-3xl bg-gray-800 border-gray-700 shadow-gray-600/10 shadow-none m-2 flex-1 max-w-md">
        <h2 class="text-lg sm:text-xl font-medium text-white mb-2">Pro</h2>
        <p class="text-lg sm:text-xl text-center mb-8 mt-4 text-gray-400">
          <span class="text-3xl sm:text-4xl font-bold text-white">$49</span> / Month
        </p>
        <ul class="list-none list-inside mb-6 text-center text-gray-300">
          <li class="font-bold text-orange-600">3 Websites</li>
          <li>Custom Domain &amp; Subdomain</li>
          <li>Advanced SEO</li>
          <li>24/7 Support</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer"
          class="lemonsqueezy-button relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          href="https://example.com/pro-plan"><span class="relative text-sm font-semibold text-black">Get Started</span></a>
      </div>
      <div
        class="flex flex-col items-center aspect-auto p-4 sm:p-8 border rounded-3xl bg-gray-800 border-gray-700 shadow-gray-600/10 shadow-none m-2 flex-1 max-w-md">
        <h2 class="text-lg sm:text-xl font-medium text-white mb-2">Business</h2>
        <p class="text-lg sm:text-xl text-center mb-8 mt-4 text-gray-400">
          <span class="text-3xl sm:text-4xl font-bold text-white">$99</span> / Month
        </p>
        <ul class="list-none list-inside mb-6 text-center text-gray-300">
          <li class="font-bold text-orange-600">Unlimited Websites</li>
          <li>Custom Domain &amp; Subdomain</li>
          <li>Enterprise SEO</li>
          <li>Premium Support</li>
        </ul>
        <a target="_blank" rel="noopener noreferrer"
          class="lemonsqueezy-button relative flex h-9 w-full items-center justify-center px-4 before:absolute before:inset-0 before:rounded-full before:bg-white before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
          href="https://example.com/business-plan"><span class="relative text-sm font-semibold text-black">Get Started</span></a>
      </div>
    </div>
  </div>
</div>

Related Examples

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

9.9k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

1 year ago

11.6k
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

8k
Semi transparent pricing cards

Author:
Anonymous

1 year ago

7.7k
Pricing cards pair

Author:
Samuel Dawson

2 years ago

9.9k
Pricing Card

Author:
Amit Pachange

2 years ago

12.7k
Fancy pricing card

Author:
Laurits

2 years ago

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

Author:
Samuel Dawson

2 years ago

10.1k
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. 🚀

Author:
Banshee

2 months ago

369
Pricing card

Author:
Sophia Baker

2 years ago

7.9k
Pricing table

Author:
Laurits

2 years ago

9.8k
Pricing cards in pair

Author:
Nour Haider

1 year ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components