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

9.6k

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

Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

1 year ago

13.4k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

8 months ago

2k
Basic pricing card

Author:
Sienna

1 year ago

10k
Pricing Card with gradient background
A sleek and transparent card displaying your product's pricing. It's designed to be both visually appealing and informative, helping users understand your pricing options at a glance.

Author:
Computer guy

1 year ago

7.4k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

11.4k
Basic pricing block

Author:
Leon Bachmann

2 years ago

6.6k
Pricing Table

Author:
Akshay

2 years ago

9.8k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

2 months ago

137
Pricing Card with Toggle

Author:
Paul Intay

2 months ago

571
Tiered Pricing Blocks
An organized way to compare different product offerings or pricing tiers. Users can quickly assess the features and pricing for various products.

Author:
Mereani Waqa

1 year ago

7.8k
Pricing card with CTA

Author:
Laurits

2 years ago

8.9k
Card
Card

Author:
Aman kumar

7 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components