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

10.8k

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

Horizontal Pricing Card with gradient shadow

Author:
Prajwal Hallale

1 year ago

214
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

5 months ago

501
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

8 months ago

1.6k
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.5k
Basic pricing block

Author:
Leon Bachmann

2 years ago

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

Author:
Anonymous

1 year ago

4.2k
Pricing cards in pair

Author:
Nour Haider

2 years ago

13.5k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.5k
Clean pricing cards

Author:
Santiago Hernandez

1 year ago

2.4k
Simple yet stylish pricing table

Author:
Laurits

2 years ago

8.7k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

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

2 years ago

9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components