Home
S. Patel
Simple pricing cards

Simple pricing cards

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

Pricing

Author S. Patel

11.1k

Fork Fullscreen

<div class="max-w-screen-xl mx-auto px-6 md:px-8 lg:px-12 grid grid-cols-1 sm:grid-cols-2 gap-x-6 mt-16">
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">5 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€5 p/m</p>
                    <p class="text-lg">€1.00 per site</p>
                </div>
            </li>
        </ul>
    </a>
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">10 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€9 p/m</p>
                    <p class="text-lg">€0.90 per site</p>
                </div>
            </li>
        </ul>
    </a>
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">25 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€20 p/m</p>
                    <p class="text-lg">€0.80 per site</p>
                </div>
            </li>
        </ul>
    </a>
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">50 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€35 p/m</p>
                    <p class="text-lg">€0.70 per site</p>
                </div>
            </li>
        </ul>
    </a>
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">100 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€65 p/m</p>
                    <p class="text-lg">€0.65 per site</p>
                </div>
            </li>
        </ul>
    </a>
    <a href="#" class="shadow hover:shadow-lg duration-500 mb-6 bg-yellow-100 py-4 lg:py-6 px-8 rounded-lg">
        <ul>
            <li class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">200 sites</p>
                </div>
                <div>
                    <p class="text-xl lg:text-2xl font-bold text-gray-800 mb-2">€100 p/m</p>
                    <p class="text-lg">€0.50 per site</p>
                </div>
            </li>
        </ul>
    </a>
</div>

Related Examples

Pricing table with 2 columns

Author:
Piet Vriend

3 years ago

13k
Pricing Section
Blue-themed pricing cards with beautiful UI

Author:
Emrys11

1 year ago

945
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

1 year ago

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

9 months ago

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

9 months ago

600
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

3 weeks ago

67
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

7 months ago

801
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.8k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

705
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

7 months ago

751
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components