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

5.9k

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

7 months ago

6.3k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

11 months ago

10k
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

8 months ago

6.1k
Semi transparent pricing cards

Author:
Anonymous

9 months ago

5.8k
Pricing cards pair

Author:
Samuel Dawson

1 year ago

8.4k
Pricing Card

Author:
Amit Pachange

1 year ago

10.1k
Fancy pricing card

Author:
Laurits

1 year ago

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

Author:
Samuel Dawson

1 year ago

8.6k
Pricing card

Author:
Piet Vriend

1 year ago

7.2k
Pricing cards in pair

Author:
Santiago Hernandez

1 month ago

115
Horizontal Pricing Card

Author:
Mereani Waqa

7 months ago

3.4k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

11.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent