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

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

10.2k
Pricing section
Service/product pricing section

Author:
Sophia Baker

3 years ago

13k
Pricing section

Author:
Leon Bachmann

3 years ago

12.3k
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Author:
Muhammad Umair Arshad

9 months ago

946
The future ai
The is technology

Author:
ORGIN_DREAMS

8 months ago

768
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

2 years ago

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

9 months ago

1k
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

2.5k
Pricing card

Author:
Task Master

3 years ago

9.1k
Interactive Multi-Method Donation Section
Overview: A high-trust, conversion-oriented fundraising section styled in the project's signature Navy Blue theme. It provides users with flexible payment options, ranging from one-click fixed amounts to manual bank transfers and cryptocurrency donations. Key Features: Smart Amount Logic: Includes a JavaScript-powered selector where users can choose a preset amount ($10, $25, $50) or type a custom value. The interface automatically toggles states (deselecting buttons when typing, and vice-versa) to prevent user error. Payment Methods: Quick Card/Checkout: Primary call-to-action column. Bank Transfer: A clean card displaying account details with a "Copy to Clipboard" utility. Crypto (Bitcoin): A specialized dark-themed card featuring a placeholder QR code and wallet address copying functionality. Trust Signals: Includes security iconography (lock, shield) and reassuring copy to boost donor confidence. Visual Hierarchy: Uses a 7/5 grid split to prioritize the immediate donation action while keeping manual payment methods accessible but secondary. Tech Stack: Framework: Tailwind CSS. Icons: Ionicons. Scripting: Vanilla JavaScript (for amount toggling and clipboard copying functions). Fonts: DM Serif Display (Headings) + Inter (Body). Usage: Ideal for the "Support Us" page or a dedicated campaign landing page. The script tag included at the bottom handles all the interactivity (button selection and text copying) without needing external libraries.

Author:
Juan D. Cortorreal

1 month ago

336
Pricing cards pair

Author:
Samuel Dawson

2 years ago

11k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

7 months ago

716

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components