Home
Freja Jensen
Pricing cards

Pricing cards

This tailwind example is contributed by Freja Jensen, on 26-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Freja Jensen

10.1k

Fork Fullscreen

<div class="relative z-10 mx-auto max-w-7xl px-6 lg:px-8 my-12">
    <div class="mx-auto grid max-w-md grid-cols-1 gap-8 lg:max-w-5xl lg:grid-cols-2 lg:gap-8">
        <div class="flex flex-col rounded-3xl bg-white shadow-xl ring-1 ring-black/10">
            <div class="p-8 sm:p-10">
                <h3 class="text-lg font-semibold leading-8 tracking-tight text-blue-600" id="tier-hobby">
                    Hobby</h3>
                <div class="mt-4 flex items-baseline text-5xl font-bold tracking-tight text-gray-900">
                    $0
                    <span class="text-lg font-semibold leading-8 tracking-normal text-gray-500">/mo</span>
                </div>
                <p class="mt-6 text-base leading-7 text-gray-600">All basic features included.</p>
            </div>
            <div class="flex flex-1 flex-col p-2">
                <div class="flex flex-1 flex-col justify-between rounded-2xl bg-gray-50 p-6 sm:p-8">
                    <ul role="list" class="space-y-6">
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Bookmark Favorites</p>
                        </li>

<li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Import Bookmarks from Twitter</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Full-text Search</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Private Bookmarks (via DMs) 🚧 </p>
                        </li>

</ul>
                    <div class="mt-8">
                        <a href="/login"
                            class="inline-block w-full rounded-lg bg-gray-900 px-4 py-4 text-center text-sm font-semibold leading-5 text-white shadow-md hover:bg-white hover:text-gray-900 hover:ring-gray-900 hover:ring"
                            aria-describedby="tier-team">Get started today</a>
                    </div>
                </div>
            </div>
        </div>

<div class="flex flex-col rounded-3xl bg-white shadow-xl ring-1 ring-black/10">
            <div class="p-8 sm:p-10">
                <h3 class="text-lg font-semibold leading-8 tracking-tight text-blue-600" id="tier-team">
                    Pro</h3>
                <div class="mt-4 flex items-baseline text-5xl font-bold tracking-tight text-gray-900">
                    $6
                    <span class="text-lg font-semibold leading-8 tracking-normal text-gray-500">/mo</span>
                </div>
                <p class="mt-6 text-base leading-7 text-gray-600">For those who expect more.</p>
            </div>
            <div class="flex flex-1 flex-col p-2">
                <div class="flex flex-1 flex-col justify-between rounded-2xl bg-gray-50 p-6 sm:p-8">
                    <ul role="list" class="space-y-6">
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Bookmark Favorites</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Manage and Filter Tags</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Filter by Authors</p>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0">
                                <svg class="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5">
                                    </path>
                                </svg>
                            </div>
                            <p class="ml-3 text-sm leading-6 text-gray-600">Import Bookmarks from Twitter</p>
                        </li>
                    </ul>
                    <div class="mt-8">
                        <a href="/billing"
                            class="inline-block w-full rounded-lg bg-gray-900 px-4 py-4 text-center text-sm font-semibold leading-5 text-white shadow-md hover:bg-white hover:text-gray-900 hover:ring-gray-900 hover:ring"
                            aria-describedby="tier-team">Get started today</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

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

Author:
Andreas Wagner

2 years ago

14k
3 pricing cards

Author:
Laurits

3 years ago

14.4k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.5k
Pricing Card

Author:
Amit Pachange

2 years ago

13.3k
Pricing card

Author:
Laurits

3 years ago

10.8k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

6 months ago

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

Author:
Computer guy

2 years ago

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

7 months ago

1.1k
Basic pricing card

Author:
Sienna

2 years ago

10.8k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13.6k
Horizontal Pricing Card

Author:
Mereani Waqa

2 years ago

5.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components