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.9k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

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

Author:
Andreas Ludvigsson

2 years ago

3.6k
3 pricing cards

Author:
Laurits

3 years ago

15k
Card Princing

Author:
Raul antonio de la cruz hernandez

2 months ago

161
Pricing card

Author:
Task Master

3 years ago

9.2k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

10 months ago

694
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.9k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

11 months ago

1.1k
Pricing Card

Author:
Amit Pachange

3 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components