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

9.8k

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

Author:
Laurits

2 years ago

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

Author:
Andreas Wagner

1 year ago

13.7k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.4k
Pricing Card

Author:
Amit Pachange

2 years ago

13.1k
Pricing card

Author:
Laurits

2 years ago

10.7k
Pricing cards in pair

Author:
Anonymous

2 years ago

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

Author:
Computer guy

1 year ago

8k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

4 months ago

748
Pricing
Looks better with in [Line-2] with: md:w-3/5

Author:
Matti

9 months ago

946
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

8 months ago

812

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components