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

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

12k
3 pricing cards

Author:
Laurits

2 years ago

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

Author:
Andreas Wagner

1 year ago

12.5k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

8.8k
Pricing Card

Author:
Amit Pachange

2 years ago

12.8k
Pricing card

Author:
Laurits

2 years ago

10.1k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

1 month ago

316
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

7 months ago

1.1k
Pricing Card
A responsive pricing card build using html and tailwind css

Author:
Rajesh Maheshwari

1 month ago

199
Basic pricing card

Author:
Sienna

2 years ago

11k
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

8.1k
Basic pricing card

Author:
Sienna

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components