Home
Kennedy Mills
Tailwind pricing cards

Tailwind pricing cards

credits: https://twitter.com/namyakhann

This tailwind example is contributed by Kennedy Mills, on 12-Jun-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Kennedy Mills

13k

Fork Fullscreen

<div class="flex  items-center justify-center bg-[#000]">
    
    <div class="mx-auto max-w-screen-xl px-4 py-8 lg:px-6 lg:py-16">
        <div class="mx-auto mb-8 max-w-screen-md  lg:mb-12 text-center">
            <h2 class="mb-10 text-4xl font-bold tracking-tight text-white">Pay once, use forever</h2>
        </div>
        <div class="space-y-8  lg:grid md:grid-cols-3 lg:space-y-0 lg:gap-10">
            
            <div
                class="mx-auto flex max-w-lg space-y-8 items-start flex-col rounded-3xl border border-gray-200 bg-white p-6 text-gray-900 xl:p-8">

<h3 class="text-lg font-normal ">Basic</h3>
                <div class="my-8 flex items-baseline justify-center ">
                    <span class="mr-2 text-5xl font-extrabold">$29</span>
                    <span class="text-gray-600">/month</span>
                </div>

<p class="font-light text-gray-600 sm:text-sm">Best option for personal use & for your next project.</p>
                <a
                    class="cursor-pointer bg-gray-900 w-full rounded-md  p-3 text-center text-sm font-semibold text-white shadow-sm  hover:-translate-y-1">Get
                    started</a>
                
                <ul role="list" class="mb-8 space-y-4 text-left text-gray-600  text-sm">
                    <li class="flex items-center space-x-3 ">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>10,000 visitors</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Unlimited widgets</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>All analytics features</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Priority support</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Lifetime updates</span>
                    </li>
                </ul>

</div>
            
            <div
                class="mx-auto flex max-w-lg space-y-8 items-start flex-col rounded-3xl  bg-[#D8FA6D] p-6 text-gray-900 xl:p-8">

<h3 class="text-lg font-normal ">Essential</h3>
                <div class="my-8 flex items-baseline justify-center ">
                    <span class="mr-2 text-5xl font-extrabold">$29</span>
                    <span class="text-gray-600">/month</span>
                </div>

</div>
            
            <div
                class="mx-auto flex max-w-lg space-y-8 items-start flex-col rounded-3xl  bg-[#DCA6F3] p-6 text-center text-gray-900 xl:p-8">

<h3 class="text-lg font-normal ">Growth</h3>
                <div class="my-8 flex items-baseline justify-center ">
                    <span class="mr-2 text-5xl font-extrabold">$29</span>
                    <span class="text-gray-600">/month</span>
                </div>

<p class="font-light text-gray-600 sm:text-sm">Best option for personal use & for your next project.</p>
                <a
                    class="cursor-pointer bg-gray-900 w-full rounded-md  p-3  text-sm font-semibold text-white shadow-sm  hover:-translate-y-1">Get
                    started</a>
                
                <ul role="list" class="mb-8 space-y-4 text-left text-gray-600  text-sm">
                    <li class="flex items-center space-x-3 ">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>10,000 visitors</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Unlimited widgets</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>All analytics features</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Priority support</span>
                    </li>
                    <li class="flex items-center space-x-3">
                        
                        <svg class="h-5 w-5 flex-shrink-0 bg-gray-900 rounded-full p-0.5 text-white" fill="currentColor"
                            viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <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>Lifetime updates</span>
                    </li>
                </ul>

</div>
        </div>
    </div>
    </section>
    ¯

Related Examples

Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

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

Author:
Elsabe Fourie

2 years ago

11.5k
Semi transparent pricing cards

Author:
Anonymous

2 years ago

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

2 years ago

9.3k
Pricing card
basic pricing card with single price

Author:
Kaung Htet Min

2 months ago

85
Pricing card

Author:
Task Master

2 years ago

9k
Price
Pricing

Author:
Jean Claude Nguetta

2 months ago

53
AgriSmart
used in agriculture for making profit and good production

Author:
INGRIDE MUZIRANENGE

1 month ago

192
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

1 year ago

941
Pricing card

Author:
Piet Vriend

2 years ago

8.8k
Product card

Author:
Anum Shahana

1 year ago

1.4k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components