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 Plan Selector
radio buttons for selecting a pricing plan

Author:
Mehmet Kaplan

5 months ago

1.1k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

9 months ago

2.9k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

1 year ago

9.1k
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
Elsabe Fourie

1 year ago

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

Author:
VoltagedDev

2 months ago

797
HighLight
Highlight section. Find it makecomponents.com

Author:
makecomponents

3 months ago

371
Service Pricing Card
Cards including a call-to-action button for signing up

Author:
Paul Intay

8 months ago

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

Author:
Rafferty Kim

1 year ago

8k
Pricing table
Pricing table with background gradient

Author:
Samuel Dawson

1 year ago

9.1k
Minimal pricing card design

Author:
Anonymous

1 year ago

6.2k
Pricing card

Author:
Task Master

1 year ago

7.6k
Pricing Card

Author:
Anonymous

1 month ago

146

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent