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 v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans

Pricing

Author Emdadul Islam

Tailwind v3.4 3.9k 11

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 - Htmlwind
Single pricing

Htmlwind

1 year ago

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

Anonymous

1 year ago

1.6k
Product card

Anum Shahana

1 year ago

2k
carde avec effet apple
carde avec effet apple

Omer fils ELENGA

5 months ago

863
Price
Pricing

Jean Claude Nguetta

1 year ago

767
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
partql
partql

sh22gr

9 months ago

866
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

787
Pricing card
basic pricing card with single price

Kaung Htet Min

1 year ago

551
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Hamza Atig

10 months ago

829
Pricing section with tailwind css

Task Master

3 years ago

12.3k
Paiement Mobile MTN
Paiement Mobile MTN

Omer fils ELENGA

8 months ago

522