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

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
Pricing table with background gradient

Author:
Samuel Dawson

1 year ago

9.1k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Author:
Anonymous

11 months ago

5.8k
3 pricing cards

Author:
Laurits

2 years ago

12k
Pricing card
Reveal details on hover

Author:
Anonymous

7 months ago

1.7k
Pricing table
pricing table for a software or service offering

Author:
Samuel Dawson

1 year ago

9.3k
Basic pricing card

Author:
Sienna

1 year ago

10.3k
Basic pricing block

Author:
Leon Bachmann

1 year ago

5.9k
Pricing card

Author:
Laurits

2 years ago

9.4k
Pricing table

Author:
Laurits

1 year ago

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

7k
Basic pricing card

Author:
Sienna

1 year ago

9.5k
Minimalist Pricing Section
A minimal but nice pricing section.

Author:
VoltagedDev

2 months ago

794

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent