Home
ORGIN_DREAMS
Pricing Plans

Pricing Plans

Js integrated Pricing Plans

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

Pricing Product

Author ORGIN_DREAMS

814

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

Author:
Anum Shahana

1 year ago

1.7k
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.

Author:
SHARIFUL ISLAM

1 year ago

2.3k
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.

Author:
Rajesh Maheshwari

1 year ago

1.5k
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.

Author:
Hamza Atig

11 months ago

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

Author:
Rathanak Phan

9 months ago

2.1k
"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

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

936
pricing
pricing

Author:
Omer fils ELENGA

8 months ago

662
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.

Author:
Ijila Itunu

6 months ago

606
Card template

Author:
Raul antonio de la cruz hernandez

2 months ago

256
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

2 months ago

219
payement cart virtual
payement cart virtual

Author:
Omer fils ELENGA

2 weeks ago

20
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

6 months ago

653

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components