Home
Laurits
Pricing cards for 3 plans

Pricing cards for 3 plans

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

Pricing

Author Laurits

8.9k

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

Author:
Freja Jensen

2 years ago

9k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

11.8k
Pricing section

Author:
Leon Bachmann

2 years ago

11.5k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

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

3 days ago

9
Pricing table

Author:
Laurits

2 years ago

9.8k
Pricing Card

Author:
Anonymous

6 months ago

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

Author:
Andreas Wagner

1 year ago

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

Author:
Anonymous

1 year ago

6.5k
Pricing cards in pair

Author:
Nour Haider

1 year ago

12.6k
Semi transparent pricing cards

Author:
Anonymous

1 year ago

7.8k
3 pricing cards

Author:
Laurits

2 years ago

13.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components