Fancy pricing card

This tailwind example is contributed by Laurits, on 02-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Laurits

Tailwind v3.4 14.6k 14

Fork Fullscreen

<div class="grid lg:grid-cols-2 px-8 gap-10 text-zinc-800 mt-10">
    <div class="flex flex-col items-center bg-slate-100 p-8 rounded-lg shadow-lg max-w-sm">
        <div>
            <h2 class="font-extrabold text-3xl text-center mb-2">Starter</h2>
            <p class="opacity-60 text-center">For the individual and small teams
            </p>
            <div class="flex flex-col items-center my-8">
                <p class="font-extrabold text-4xl">$29
                </p>
                <p class="text-sm opacity-60">/month
                </p>
            </div>
        </div>
        <div class="flex flex-col gap-1">
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>Trending Dashboard</b><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                    aria-hidden="true" class="w-4 h-4 ml-1 fill-orange-300">
                    <path fill-rule="evenodd"
                        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
                        clip-rule="evenodd"></path>
                </svg>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>10 Keywords</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>100 Accounts Tracking</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>3 Users</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg> Basic Support
            </p>
            <div class="flex justify-center mt-8 ">
                <button class="border px-4 py-2 border-violet-400 border-4 hover:bg-violet-100 rounded-xl">Get
					Started
                    </button>
            </div>
        </div>
    </div>
    <div
        class="flex flex-col items-center bg-gradient-to-br from-blue-100 via-orange-100 to-purple-100 p-8 rounded-lg shadow-lg relative border-8 border-orange-200 max-w-sm">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
            class="w-20 h-20 absolute -top-11 -left-11 fill-red-400">
            <path fill-rule="evenodd"
                d="M12.963 2.286a.75.75 0 00-1.071-.136 9.742 9.742 0 00-3.539 6.177A7.547 7.547 0 016.648 6.61a.75.75 0 00-1.152-.082A9 9 0 1015.68 4.534a7.46 7.46 0 01-2.717-2.248zM15.75 14.25a3.75 3.75 0 11-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 011.925-3.545 3.75 3.75 0 013.255 3.717z"
                clip-rule="evenodd"></path>
        </svg>
        <p class="mono text-sm absolute -top-4 bg-red-400 text-zinc-100 py-0.5 px-2 font-bold tracking-wider rounded">
            POPULAR
        </p>
        <div>
            <div class="flex gap-4 justify-center">
                <p class="font-extrabold text-3xl mb-2">Pro

</p>
            </div>
            <p class="opacity-60 text-center">For agencies and businesses

</p>
            <p class="opacity-60 text-center">
            </p>
            <div class="flex gap-4 justify-center">
                <div class="flex flex-col items-center my-8">
                    <p class="font-extrabold text-4xl">$79

</p>
                    <p class="text-sm opacity-60">/month

</p>
                </div>
            </div>
        </div>
        <div class="flex flex-col gap-1">
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>Trending Dashboard</b><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                    aria-hidden="true" class="w-4 h-4 ml-1 fill-orange-300">
                    <path fill-rule="evenodd"
                        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
                        clip-rule="evenodd"></path>
                </svg>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>25 Keywords</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>250 Accounts Tracking</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>10 Users</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg>
                <b>Early Beta Features&nbsp;</b>
            </p>
            <p class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                    fill="currentColor" aria-hidden="true" class="w-4 h-4 mr-2">
                    <path fill-rule="evenodd"
                        d="M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z"
                        clip-rule="evenodd"></path>
                </svg> Premium Support
            </p>
            <div class="flex justify-center mt-8">
                <button class="px-4 py-2 border-violet-400 border-4 hover:bg-violet-100 rounded-xl">Get
					Started
                    </button>
            </div>
        </div>
    </div>
</div>

Related Examples

Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Elsabe Fourie

2 years ago

12.6k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing Card

Amit Pachange

3 years ago

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

Andreas Wagner

2 years ago

15.4k
Beautiful pricing cards design (5-cards grid)

Liam Moore

3 years ago

15.4k
Pricing cards in pair

Nour Haider

3 years ago

14.9k
Pricing table
Pricing table with background gradient

Samuel Dawson

3 years ago

11.6k
Pricing table
pricing table for a software or service offering

Samuel Dawson

3 years ago

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

Mereani Waqa

2 years ago

10.2k
3 pricing cards

Laurits

3 years ago

15.2k
Pricing cards - with features list
Flexible Pricing Plans Cards

Anonymous

2 years ago

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

Computer guy

2 years ago

9.2k
Pricing card with CTA

Laurits

3 years ago

10.4k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
Pricing cards pair

Samuel Dawson

3 years ago

11.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

3 years ago

10.9k