Pricing section

This tailwind example is contributed by Leon Bachmann, on 19-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Leon Bachmann

Tailwind v3.4 12.9k 19

Fork Fullscreen

<div class="mt-8 p-10 sm:mt-10 space-y-4 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-3xl lg:mx-auto">
    <div class="border border-neutral-200 rounded-lg shadow-sm divide-y divide-neutral-200">
        <div class="p-6">
            <h2 class="text-lg leading-6 font-medium text-neutral-900">Personal</h2>
            <p class="mt-4 text-sm h-10 text-neutral-500">For Notion users getting started on Twitter.</p>
            <p class="mt-4 flex flex-col space-y-2">
                <span class="text-5xl font-extrabold text-neutral-900">Free</span>
            </p>
            <a href="#"
                class="mt-8 block w-full bg-blue-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Get
                Started
            </a>
        </div>
        <div class="pt-6 pb-8 px-6">
            <h3 class="text-xs font-medium text-neutral-900 tracking-wide uppercase">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">10 tweets/month</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">2 threads/month</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Only you</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="border border-neutral-200 rounded-lg shadow-sm divide-y divide-neutral-200">
        <div class="p-6">
            <h2 class="text-lg leading-6 font-medium text-neutral-900">Personal Pro</h2>
            <p class="mt-4 text-sm h-10 text-neutral-500">For professionals who use Notion to write, collaborate, plan,
                and grow on Twitter.</p>
            <p class="mt-4 flex flex-col space-y-2">

<span class="flex flex-row space-x-2 items-center">
                    <span class="text-5xl font-extrabold text-neutral-900">$9</span>
                <span class="text-xs font-medium text-neutral-500">per month<br> billed annually</span></span>
            </p>
            <a href="#"
                class="mt-8 block w-full bg-blue-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Get
                Started
            </a>
        </div>
        <div class="pt-6 pb-8 px-6">
            <h3 class="text-xs font-medium text-neutral-900 tracking-wide uppercase">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Unlimited tweets</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Unlimited threads</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Real-time analytics</span>
                </li>
                <li class="flex space-x-3"><svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24"
                        class="flex-shrink-0 h-5 w-5 text-green-500" aria-hidden="true" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                    </svg>
                    <span class="text-sm text-neutral-500">Collaborate with unlimited guests</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Related Examples

Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
Pricing cards for 3 plans

Laurits

3 years ago

10.5k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing Table

Akshay

4 years ago

11.4k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2k
Pricing Plans

ariaw

1 year ago

632
Pricing cards in pair

Santiago Hernandez

2 years ago

2.8k
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
Product card

Anum Shahana

1 year ago

1.9k
Attractive Feature Section
With Gradient Color 6 Features

KULDEEP

1 year ago

1.4k
Card template

Raul antonio de la cruz hernandez

8 months ago

531
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Juan D. Cortorreal

10 months ago

1.2k