Pricing cards for 3 plans

This tailwind example is contributed by Laurits, on 08-Feb-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 10.5k 16

Fork Fullscreen

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-10 p-10">
    <div class="bg-white hover:shadow-indigo-300 hover:shadow-md rounded-lg bg-indigo-50/30 border">
        <div class="p-1 rounded-t-lg bg-sky-400"></div>
        <div class="flex flex-col rounded p-5 lg:p-8">
            <h3 class="text-3xl text-black font-bold">Fast-Track</h3>
            <p class="py-1 text-sm">Why wait 60 days? Skip the line and Get your tool listed ASAP! 🚀</p>
            <p class="text-6xl font-bold tracking-tight pt-5">$
                10
            </p>
            <p class="py-1 text-sm">One Time Payment</p>
            <div class="pt-3 flex flex-col gap-2"><a
                    class="w-full bg-sky-400 text-white font-medium text-center py-2 mt-3 rounded-md" target="_blank"
                    href="https://cutt.ly/10dwebsite">Submit Now</a></div>
        </div>
    </div>
    <div class="bg-white hover:shadow-indigo-300 hover:shadow-md rounded-lg bg-indigo-50/30 border">
        <div class="p-1 rounded-t-lg bg-sky-400"></div>
        <div class="flex flex-col rounded p-5 lg:p-8">
            <h3 class="text-3xl text-black font-bold">Homepage Premium</h3>
            <p class="py-1 text-sm">Get your tool listed on the top of our Home Page! 😎</p>
            <p class="text-6xl font-bold tracking-tight pt-5">$
                100
            </p>
            <p class="py-1 text-sm">For 2 Weeks</p>
            <div class="pt-3 flex flex-col gap-2"><a
                    class="w-full bg-sky-400 text-white font-medium text-center py-2 mt-3 rounded-md" target="_blank"
                    href="https://cutt.ly/100dwebsite">Buy Now</a></div>
        </div>
    </div>
    <div class="bg-white hover:shadow-indigo-300 hover:shadow-md rounded-lg bg-indigo-50/30 border">
        <div class="p-1 rounded-t-lg bg-sky-400"></div>
        <div class="flex flex-col rounded p-5 lg:p-8">
            <h3 class="text-3xl text-black font-bold">Category Premium</h3>
            <p class="py-1 text-sm">Get your tool listed on the top of category page! 🌟</p>
            <p class="text-6xl font-bold tracking-tight pt-5">$
                50
            </p>
            <p class="py-1 text-sm">For 2 Weeks</p>
            <div class="pt-3 flex flex-col gap-2"><a
                    class="w-full bg-sky-400 text-white font-medium text-center py-2 mt-3 rounded-md" target="_blank"
                    href="https://cutt.ly/cat50dweb">Buy Now</a></div>
        </div>
    </div>
</div>

Related Examples

Pricing cards

Freja Jensen

3 years ago

10.8k
Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing section

Leon Bachmann

3 years ago

12.9k
3 pricing cards
Showcase your pricing structure effectively

magersa

2 years ago

4.4k
Pricing table with 2 columns

Piet Vriend

3 years ago

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

Andreas Wagner

3 years ago

15.4k
PLAN SECTION

ABDO-SY

1 year ago

1.7k
Pricing Card with Toggle

Paul Intay

1 year ago

1.3k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Pricing section
Pricing table with 3 cards for 3 plans

Leon Bachmann

3 years ago

12k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

3.6k
Tailwind pricing cards
credits: https://twitter.com/namyakhann

Kennedy Mills

3 years ago

14.2k