Pricing Plans

Js integrated Pricing Plans

This tailwind example is contributed by ORGIN_DREAMS, on 23-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card

Pricing Product

Author ORGIN_DREAMS

Tailwind v3.4 1.4k

Fork Fullscreen

<section class="py-16 bg-gray-50 px-6">
  <div class="max-w-7xl mx-auto text-center mb-12">
    <h2 class="text-3xl font-bold text-gray-900">Pricing Plans</h2>
    <p class="mt-2 text-gray-600 max-w-xl mx-auto">Choose the plan that works best for you.</p>

<div class="mt-6 flex justify-center items-center space-x-4">
      <span class="text-gray-700 font-medium">Monthly</span>
      <label for="toggle" class="inline-flex relative items-center cursor-pointer">
        <input type="checkbox" id="toggle" class="sr-only peer" />
        <div class="w-11 h-6 bg-gray-300 rounded-full peer peer-checked:bg-blue-600 transition"></div>
        <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full peer-checked:translate-x-5 transition"></div>
      </label>
      <span class="text-gray-700 font-medium">Yearly</span>
    </div>
  </div>

<div id="pricing-cards" class="max-w-7xl mx-auto grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
    
    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Basic</h3>
      <p class="text-3xl font-bold mb-2"><span class="price-monthly">$10</span><span class="price-yearly hidden">$100</span><span class="text-base font-normal">/mo</span></p>
      <ul class="mb-6 space-y-2 text-gray-600 flex-grow">
        <li>✔️ 10 Projects</li>
        <li>✔️ 5 GB Storage</li>
        <li>✔️ Basic Support</li>
      </ul>
      <button class="mt-auto bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">Choose Plan</button>
    </div>
    
    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Pro</h3>
      <p class="text-3xl font-bold mb-2"><span class="price-monthly">$25</span><span class="price-yearly hidden">$250</span><span class="text-base font-normal">/mo</span></p>
      <ul class="mb-6 space-y-2 text-gray-600 flex-grow">
        <li>✔️ 50 Projects</li>
        <li>✔️ 50 GB Storage</li>
        <li>✔️ Priority Support</li>
      </ul>
      <button class="mt-auto bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">Choose Plan</button>
    </div>
    
    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm flex flex-col">
      <h3 class="text-xl font-semibold mb-4">Enterprise</h3>
      <p class="text-3xl font-bold mb-2"><span class="price-monthly">$50</span><span class="price-yearly hidden">$500</span><span class="text-base font-normal">/mo</span></p>
      <ul class="mb-6 space-y-2 text-gray-600 flex-grow">
        <li>✔️ Unlimited Projects</li>
        <li>✔️ 200 GB Storage</li>
        <li>✔️ 24/7 Support</li>
      </ul>
      <button class="mt-auto bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition">Choose Plan</button>
    </div>
  </div>

Related Examples

Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Rathanak Phan

1 year ago

2.8k
Product Carousel with Tailwind CSS, Swiper & Alpine.js
A modern, responsive product carousel built with Tailwind CSS, Swiper, and Alpine.js. The component features smooth sliding animations, autoplay, and custom navigation controls. Each product card uses a flexible Tailwind layout and includes dynamically generated demo images, making it easy to drop into any landing page, marketing site, or product showcase. Ideal for showcasing products in a clean, lightweight, and highly customizable way.

Juraj

7 months ago

638
Caming Soon page design
coming soom page design

Tofayel Islam

9 months ago

808
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Pricing Section
Blue-themed pricing cards with beautiful UI

Emrys11

1 year ago

1.5k
Fancy pricing card

Laurits

3 years ago

14.6k
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
Basic pricing card

Sienna

3 years ago

12.1k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

2 years ago

15.4k
Feature Card

Md. Tofayel islam

1 year ago

2.1k