Home
Emdadul Islam
Pricing Section

Pricing Section

Our pricing plan section with 3 packages

This tailwind example is contributed by Emdadul Islam, on 03-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Emdadul Islam

2.9k

Fork Fullscreen

<div class="lg:flex items-center justify-between p-6 md:p-12 dark:bg-gray-700">
    <div class="lg:w-1/2 w-full">
        <p class="text-base leading-4 text-gray-600 dark:text-gray-200">Choose your plan</p>
        <h1 role="heading" class="md:text-5xl text-3xl font-bold leading-10 mt-3 text-gray-800 dark:text-white">Our
            pricing plan</h1>
        <p role="contentinfo" class="text-base leading-5 mt-5 text-gray-600 dark:text-gray-200">We’re working on a suit
            of tools to make managing complex systems easier, for everyone for free. we can’t wait to hear what you
            think
        </p>
        <div class="w-56">
            <button onclick="toggleIt()" class="bg-gray-100 dark:bg-gray-800 shadow rounded-full flex items-center mt-10 rounded-full">
                <div class="bg-gray-100 dark:bg-gray-800 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:outline-none text-base leading-none text-gray-600 dark:text-gray-200 rounded-full py-4 px-6 mr-1" id="monthly">Monthly</div>
                <div class="bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:outline-none text-base leading-none text-white rounded-full py-4 px-6" id="annually">Annually</div>
            </button>
        </div>
    </div>
    <div class="xl:w-1/2 lg:w-7/12 relative w-full lg:mt-0 mt-12 md:px-8" role="list">
        <img src="https://i.ibb.co/0n6DSS3/bgimg.png" class="absolute w-full -ml-12 mt-24" alt="background circle images" />
        <div role="listitem" class="bg-white dark:bg-gray-800 cursor-pointer shadow rounded-lg p-8 relative z-30">
            <div class="md:flex items-center justify-between">
                <h2 class="text-2xl font-semibold leading-6 text-gray-800 dark:text-white">Starter</h2>
                <p class="text-2xl font-semibold md:mt-0 mt-4 leading-6 text-gray-800 dark:text-white">FREE</p>
            </div>
            <p class="md:w-80 text-base leading-6 mt-4 text-gray-600 dark:text-gray-200">Full access to all features and
                no credit card required
            </p>
        </div>
        <div role="listitem" class="bg-white dark:bg-gray-800 cursor-pointer shadow rounded-lg mt-3 flex relative z-30">
            <div class="w-2.5 h-auto bg-indigo-700 rounded-tl-md rounded-bl-md"></div>
            <div class="w-full p-8">
                <div class="md:flex items-center justify-between">
                    <h2 class="text-2xl font-semibold leading-6 text-gray-800 dark:text-white">Personal</h2>
                    <p class="text-2xl md:mt-0 mt-4 font-semibold leading-6 text-gray-800 dark:text-white">
                        $18<span class="font-normal text-base">/mo</span></p>
                </div>
                <p class="md:w-80 text-base leading-6 mt-4 text-gray-600 dark:text-gray-200">Unlimited products features
                    and dedicated support channels
                </p>
            </div>
        </div>
        <div role="listitem" class="bg-white dark:bg-gray-800 cursor-pointer shadow rounded-lg p-8 relative z-30 mt-7">
            <div class="md:flex items-center justify-between">
                <h2 class="text-2xl font-semibold leading-6 text-gray-800 dark:text-white">Team</h2>
                <p class="text-2xl md:mt-0 mt-4 font-semibold leading-6 text-gray-800 dark:text-white">
                    $18<span class="font-normal text-base">/mo</span>
                </p>
            </div>
            <p class="md:w-80 text-base leading-6 mt-4 text-gray-600 dark:text-gray-200">Unlimited products features and
                dedicated support channels
            </p>
        </div>
    </div>
</div>

Related Examples

Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

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

9 months ago

1.7k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.8k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

7 months ago

509
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

10 months ago

1.5k
Card
Card

Author:
Aman kumar

1 year ago

1.4k
Pricing card for subscription

Author:
Task Master

2 years ago

11.2k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.4k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

5 months ago

625
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

7 months ago

658
Simple pricing cards

Author:
S. Patel

2 years ago

10.9k
Pricing cards in pair

Author:
Anonymous

2 years ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components