partql

This tailwind example is contributed by sh22gr, on 01-Feb-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing Widget

Author sh22gr

Tailwind v3.4 866 1

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 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>

<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>

<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>
</div>

Related Examples

Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Ameth Galarcio

2 years ago

3.4k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
Pricing card

Sophia Baker

3 years ago

8.8k
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

9 months ago

728
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

111
Pricing table

Laurits

3 years ago

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

Erik Hyatt

3 years ago

14.4k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Pricing card

Laurits

3 years ago

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

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.6k
Pricing Table with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.1k
Pricing card

Task Master

3 years ago

9.7k