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

Anum Shahana

1 year ago

2k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

SHARIFUL ISLAM

1 year ago

2.8k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
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
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Card template

Raul antonio de la cruz hernandez

9 months ago

795
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

725
payement cart virtual
payement cart virtual

Omer fils ELENGA

7 months ago

468
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

6 months ago

624