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

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 cards in pair

Author:
Nour Haider

2 years ago

13.3k
Pricing Card with Toggle

Author:
Paul Intay

9 months ago

915
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

1.8k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

4 months ago

627
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

2.8k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

2 months ago

329
The future ai
The is technology

Author:
ORGIN_DREAMS

3 months ago

312
Horizontal pricing card

Author:
Anonymous

6 months ago

634
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

2 months ago

456
Pricing card for subscription

Author:
Task Master

2 years ago

10.9k
SoungCraft
Used for making and trading songs

Author:
Frederick250

3 months ago

415

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components