Home
Laurits
Pricing table

Pricing table

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

Pricing

Author Laurits

10.8k

Fork Fullscreen

<div
    class="mt-8 p-4 space-y-4 sm:mt-12 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 lg:mx-auto lg:max-w-4xl xl:mx-0 xl:max-w-none xl:grid-cols-3">
    <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
            <h2 class="text-lg font-medium leading-6 text-gray-900">Free</h2>
            <p class="mt-4 text-sm text-gray-500">Get started with AI-generated teaching content.</p>
            <p class="mt-8">
                <span class="text-4xl font-bold tracking-tight text-gray-900">$0</span>

<span class="text-base font-medium text-gray-500">/month</span>
            </p>
            <button class="mt-8 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900 plausible-event-name=Plan-starter">Get Starter</button>
        </div>
        <div class="px-6 pt-6 pb-8">
            <h3 class="text-sm font-medium text-gray-900">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>100 Exercises</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>10 Worksheets</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>5 Lesson Plans</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Unlock all Gamification Options</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="divide-y divide-gray-200 rounded-lg border border-gray-200 shadow-sm">
        <div class="p-6">
            <h2 class="text-lg font-medium leading-6 text-gray-900">Pro</h2>
            <p class="mt-4 text-sm text-gray-500">Everything you could need for your lessons.</p>
            <p class="mt-8">
                <span class="text-4xl font-bold tracking-tight text-gray-900">$12</span>
                <span class="text-base font-medium text-gray-500">/month</span>
            </p>
            <button class="mt-8 block w-full rounded-md border border-gray-800 bg-gray-800 py-2 text-center text-sm font-semibold text-white hover:bg-gray-900 plausible-event-name=Plan-pro">Get Pro</button>
        </div>
        <div class="px-6 pt-6 pb-8">
            <h3 class="text-sm font-medium text-gray-900">What's included</h3>
            <ul role="list" class="mt-6 space-y-4">
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>200 Exercises</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>30 Worksheets</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Create up to <strong>20 Lesson Plans</strong> every Month</span>
                </li>
                <li class="flex space-x-3"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                        fill="currentColor" aria-hidden="true" class="h-5 w-5 flex-shrink-0 text-green-500">
                        <path fill-rule="evenodd"
                            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                            clip-rule="evenodd">
                        </path>
                    </svg>
                    <span class="text-sm text-gray-500">Unlock all Gamification Options</span>
                </li>
            </ul>
        </div>
    </div>
</div>

Related Examples

3 pricing cards

Author:
Laurits

3 years ago

15k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

1 year ago

1.5k
Ticket Options ios 26
Ticket Options ios 26

Author:
Omer fils ELENGA

3 months ago

199
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

3.3k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

234
pricing
pricing

Author:
Omer fils ELENGA

8 months ago

661
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

5 months ago

602
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

216
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

3 months ago

169
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
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

11 months ago

1.5k
Pricing card
Reveal details on hover

Author:
Anonymous

1 year ago

4.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components