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.3k

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

Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

5 months ago

639
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

2 years ago

10k
Pricing Table

Author:
Akshay

3 years ago

10.8k
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

1 year ago

2.7k
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

2.6k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Author:
Rajesh Maheshwari

9 months ago

1.2k
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

1 year ago

2k
Product card

Author:
Anum Shahana

11 months ago

1.4k
Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

223
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

6 months ago

389
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.9k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

1 day ago

4

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components