Home
Leon Bachmann
Pricing section

Pricing section

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

Pricing

Author Leon Bachmann

12.3k

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

Author:
Piet Vriend

3 years ago

13k
Pricing cards for 3 plans

Author:
Laurits

3 years ago

9.7k
Semi transparent pricing cards

Author:
Anonymous

2 years ago

9.3k
Card
Card

Author:
Aman kumar

1 year ago

2.6k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

3 years ago

11.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

11 months ago

1.5k
Simple yet stylish pricing table

Author:
Laurits

3 years ago

9.1k
Pricing table

Author:
Laurits

3 years ago

10.8k
Pricing card

Author:
Task Master

3 years ago

9.2k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Minimal pricing card design

Author:
Anonymous

2 years ago

7.5k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components