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

12.8k

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

2 years ago

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

1 year ago

11.4k
Semi transparent pricing cards

Author:
Anonymous

2 years ago

8.8k
The future ai
The is technology

Author:
ORGIN_DREAMS

5 months ago

452
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.4k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

6.9k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.5k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

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

6 months ago

804
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

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

Author:
Anonymous

1 year ago

4.2k
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components