Pricing section with tailwind css

This tailwind example is contributed by Task Master, on 15-Nov-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Task Master

Tailwind v3.4 12.1k 14

Fork Fullscreen

<div class="p-10">
    <div class="relative max-w-7xl mx-auto">
        <div class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex">
            <div class="flex-1 px-6 py-8 lg:p-12 bg-gray-600">
                <h3 class="text-2xl font-extrabold text-white sm:text-3xl">Lifetime access</h3>
                <p class="mt-6 text-base text-gray-50 sm:text-lg">Take your Tailwind CSS development to the next level!
                </p>
                <div class="mt-8">
                    <div class="flex items-center">
                        <div class="flex-1 border-t-2 border-gray-200"></div>
                    </div>
                    <ul role="list" class="mt-8 space-y-5 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5">
                        <li class="flex items-start lg:col-span-1">
                            <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd"></path>
                                </svg></div>
                            <p class="ml-3 text-white">Inspect Tailwind CSS websites</p>
                        </li>
                        <li class="flex items-start lg:col-span-1">
                            <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd"></path>
                                </svg></div>
                            <p class="ml-3 text-white">Edit mode in real-time</p>
                        </li>
                        <li class="flex items-start lg:col-span-1">
                            <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd"></path>
                                </svg></div>
                            <p class="ml-3 text-white">Copy utility classes right into your clipboard</p>
                        </li>
                        <li class="flex items-start lg:col-span-1">
                            <div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                    aria-hidden="true">
                                    <path fill-rule="evenodd"
                                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                        clip-rule="evenodd"></path>
                                </svg></div>
                            <p class="ml-3 text-white">Free Chrome extension updates (Firefox coming soon)</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div
                class="py-8 px-6 text-center lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12 bg-gray-700">
                <p class="text-lg leading-6 font-medium text-white">Pay once, own it forever</p>
                <div class="mt-4 flex items-center justify-center text-5xl font-extrabold text-white">
                    <span>$19.99</span><span class="ml-3 text-xl font-medium text-gray-50">USD</span>
                </div>
                <div class="mt-6">
                    <div class="rounded-md shadow">
                        <a href="#"
                            class="flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-600">Buy
                            now</a>
                    </div>
                    <p class="text-gray-300 text-sm mt-3">100% money back guarantee</p>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing card for subscription

Task Master

3 years ago

11.9k
multiple pricing cards
basic pricing card with single price

Amit Pachange

3 years ago

13.2k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

2 years ago

12.6k
Pricing card

Laurits

3 years ago

11.6k
Price
Pricing

Jean Claude Nguetta

11 months ago

722
Card Princing

Raul antonio de la cruz hernandez

8 months ago

387
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. 🚀

Banshee

1 year ago

2.1k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

bara masalma

1 year ago

1.5k
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
SoungCraft
Used for making and trading songs

Frederick250

1 year ago

1.2k