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

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.8k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.3k
Pricing section

Author:
Leon Bachmann

2 years ago

11.9k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

4 months ago

745
Fancy pricing card

Author:
Laurits

2 years ago

13.4k
Pricing card single

Author:
Manuela Bianka

3 months ago

335
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

4 months ago

630
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Rafferty Kim

1 year ago

9.7k
Product card

Author:
Anum Shahana

8 months ago

1.1k
Simple pricing cards

Author:
S. Patel

2 years ago

10.7k
Horizontal Pricing Card

Author:
Mereani Waqa

1 year ago

5.3k
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

3 months ago

320

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components