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

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

6 months ago

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

4 months ago

995
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

3 months ago

792
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

2 months ago

218
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

1 week ago

207
Basic pricing block

Author:
Leon Bachmann

2 years ago

6.8k
Pricing table

Author:
Laurits

2 years ago

10.1k
3D Amazing Product Card
Here's a stunning 3D product card with hover effects, 3D rotation, and a clean modern design using HTML, CSS (Tailwind), and a bit of JavaScript for the interactive 3D effect:

Author:
Nicole Shalom

4 weeks ago

255
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

1 year ago

2.6k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

4 months ago

919
Products information
Products information services and products display

Author:
Rushikesh Latpate

6 months ago

794

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components