Subscription Plan Cards

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

This tailwind example is contributed by Elsabe Fourie, on 05-Nov-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Elsabe Fourie

Tailwind v3.4 12.6k 11

Fork Fullscreen

<div class="">
    <div>
        <h2 class="text-3xl font-bold tracki text-center mt-12 sm:text-5xl ">Pricing</h2>
        <p class="max-w-3xl mx-auto mt-4 text-xl text-center ">Get started on our free plan and upgrade when you are
            ready.</p>
    </div>
    <div class="mt-24 container space-y-12 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8">
        <div class="relative p-8  border border-gray-200 rounded-2xl shadow-sm flex flex-col">
            <div class="flex-1">
                <h3 class="text-xl font-semibold ">Free</h3>
                <p class="mt-4 flex items-baseline ">
                    <span class="text-5xl font-extrabold tracking-tight">$0</span><span class="ml-1 text-xl font-semibold">/month</span>
                </p>
                <p class="mt-6 ">You just want to discover</p>
                <ul role="list" class="mt-6 space-y-6">
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">10 Credits</span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Generate video (2 credits)</span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Quizz (1 credits) </span></li>
                </ul>
            </div><a
                class="bg-emerald-50 text-emerald-700 hover:bg-emerald-100 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium"
                href="/auth/login">Signup for free</a>
        </div>
        <div class="relative p-8  border border-gray-200 rounded-2xl shadow-sm flex flex-col">
            <div class="flex-1">
                <h3 class="text-xl font-semibold ">Pro</h3>
                <p
                    class="absolute top-0 py-1.5 px-4 bg-emerald-500 text-white rounded-full text-xs font-semibold uppercase tracking-wide  transform -translate-y-1/2">
                    Most popular</p>
                <p class="mt-4 flex items-baseline ">
                    <span class="text-5xl font-extrabold tracking-tight">$12</span><span class="ml-1 text-xl font-semibold">/month</span>
                </p>
                <p class="mt-6 ">You want to learn and have a personal assistant</p>
                <ul role="list" class="mt-6 space-y-6">
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">30 credits</span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Powered by GPT-4 (more accurate)</span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Generate video (2 credits)</span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Quizz (1 credits) </span></li>
                    <li class="flex"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="flex-shrink-0 w-6 h-6 text-emerald-500" aria-hidden="true">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg><span class="ml-3 ">Analytics on the quizz</span></li>
                </ul>
            </div><a
                class="bg-emerald-500 text-white  hover:bg-emerald-600 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium"
                href="/auth/login">Signup for free</a>
        </div>
    </div>

</div>

Related Examples

Fancy pricing card

Laurits

3 years ago

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

Andreas Wagner

2 years ago

15.4k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Computer guy

2 years ago

9.3k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Kennedy Mills

3 years ago

14.1k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

11.8k
Pricing cards pair

Samuel Dawson

3 years ago

11.2k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Computer guy

3 years ago

8.7k
Pricing card

Laurits

3 years ago

11.6k
Pricing section with tailwind css

Task Master

3 years ago

12.1k
Pricing card for subscription

Task Master

3 years ago

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

Liam Moore

3 years ago

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

Andreas Ludvigsson

2 years ago

4.1k
Semi transparent pricing cards

Anonymous

3 years ago

9.7k