Pricing table

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

Pricing

Author Laurits

Tailwind v3.4 11.3k 21

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

Interactive Pricing Cards
this are pricing cards

ishimwe shadad

1 year ago

1.7k
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.8k
Horizontal Pricing Card with gradient shadow

Prajwal Hallale

2 years ago

258
Fancy pricing card

Laurits

3 years ago

14.6k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Anonymous

2 years ago

7.9k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Rathanak Phan

1 year ago

2.9k
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Ayyamperumal S

8 months ago

1.1k
Pricing Card with Toggle

Paul Intay

1 year ago

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

Hamza Atig

1 year ago

2.1k
SoungCraft
Used for making and trading songs

Frederick250

1 year ago

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

Kennedy Mills

3 years ago

14.3k