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

9.2k

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

9.4k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.1k
Pricing section

Author:
Leon Bachmann

2 years ago

11.6k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.7k
Services
explore our awesome Services

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

1 year ago

2.1k
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.5k
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

179
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.4k
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

2 weeks ago

18
Pricing Plans
Js integrated Pricing Plans

Author:
ORGIN_DREAMS

1 month ago

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

Author:
Christian Ahlin

6 months ago

901
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

1 month ago

112

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components