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

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

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

10.7k
Semi transparent pricing cards

Author:
Anonymous

1 year ago

8.4k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

1 year ago

6.6k
PLAN SECTION

Author:
ABDO-SY

2 months ago

183
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

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

Author:
Matti

6 months ago

783
Services
explore our awesome Services

Author:
ابراهيم سيد

1 year ago

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

4 months ago

697
Pricing cards
pricing section with 3 cards

Author:
Noob

2 years ago

11.3k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components