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

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

Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
Pricing card single

Author:
Manuela Bianka

3 months ago

335
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

2 years ago

10.8k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

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

6 months ago

1.1k
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

2 years ago

10.7k
Pricing card

Author:
Sophia Baker

2 years ago

8.5k
Pricing Card

Author:
Anonymous

11 months ago

1.2k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.7k
The future ai
The is technology

Author:
ORGIN_DREAMS

3 months ago

312
Semi transparent pricing cards

Author:
Anonymous

1 year ago

8.6k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

4 months ago

642

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components