Home
Task Master
Pricing card for subscription

Pricing card for subscription

This tailwind example is contributed by Task Master, on 30-Dec-2022. 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 Task Master

9.9k

Fork Fullscreen

<div class="p-4 h-screen dark:bg-gray-800">
    <div
        class="max-w-lg mx-auto rounded-lg overflow-hidden lg:max-w-none lg:flex my-10 shadow-teal border-4 border-teal-400">
        <div class="bg-white px-6 py-8 lg:flex-shrink-1 lg:p-12 dark:bg-gray-900">
            <h3
                class="text-2xl text-left leading-8 font-extrabold text-gray-900 sm:text-3xl sm:leading-9 dark:text-gray-100">
                Subscription
            </h3>
            <p class="mt-6 text-left font-ttnorms leading-8 text-gray-500 text-lg dark:text-gray-400">The Team
                subscription grants your
                entire
                As a subscriber to our website, you'll have access to a wide range of exclusive benefits and perks.
            </p>
            <div class="mt-8">
                <div class="flex items-center">
                    <h4
                        class="flex-shrink-0 pr-4 bg-white text-sm leading-5 tracking-wider font-semibold uppercase text-teal-600 dark:text-teal-300 dark:bg-transparent">
                        What's included
                    </h4>
                    <div class="flex-1 border-t-2 border-gray-200 dark:border-gray-700"></div>
                </div>
                <ul class="pl-0 mt-8 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5 space-y-5 lg:space-y-0">
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <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-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Access to premium content and exclusive articles
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <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-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Free Shipping on select products
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <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-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Early access to upcoming events and promotions
                        </p>
                    </li>
                    <li class="flex items-start lg:col-span-1">
                        <div class="flex-shrink-0"><svg class="h-5 w-5 text-teal-400 dark:text-teal-300"
                                fill="currentColor" viewBox="0 0 20 20">
                                <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-lg leading-5 text-gray-700 font-ttnorms text-left dark:text-gray-300">
                            Dedicated customer support
                        </p>
                    </li>
                </ul>
            </div>
        </div>
        <div
            class="py-8 px-6 text-center bg-gray-50 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12 dark:bg-gray-900">
            <p
                class="text-xl leading-6 font-medium text-gray-900 lg:max-w-xs lg:mx-auto mb-0 lg:mb-6 dark:text-gray-100">
                A single
                payment for your entire team
            </p>
            <div
                class="my-10 lg:my-6 flex items-baseline justify-center text-5xl leading-none font-extrabold text-gray-900 dark:text-gray-100">
                <span class="font-brown">$19</span><span class="text-xl leading-7 font-medium text-gray-500 font-ttnorms">/month</span>
            </div>
            <div class="lg:mt-6">
                <div class="rounded-md shadow">
                    <a href="#"
                        class="flex items-center justify-center px-5 py-3 leading-6 font-medium rounded-md focus:outline-none focus:ring transition duration-200 ease-in-out shadow-teal border-2 border-teal-400 bg-white hover:bg-teal-400 hover:shadow-teal-hover text-teal-400 hover:text-white text-lg relative z-20 dark:bg-teal-400 dark:text-white dark:hover:bg-teal-500 dark:hover:text-white">
                        Start your 7-day trial
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing section with tailwind css

Author:
Task Master

2 years ago

10.3k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Author:
Andreas Wagner

1 year ago

12.2k
3 pricing cards

Author:
Laurits

2 years ago

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

Author:
Liam Moore

1 year ago

13.4k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

4.6k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

1 year ago

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

Author:
Elsabe Fourie

1 year ago

9.4k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

8.7k
Pricing cards in pair

Author:
Anonymous

1 year ago

6.8k
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

2 months ago

564
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

1 month ago

271
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

7.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components