Simple yet stylish pricing table

This tailwind example is contributed by Laurits, on 04-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Laurits

Tailwind v3.4 10k 8

Fork Fullscreen

<div class="h-screen bg-gray-100 p-10">
    <div class="max-w-screen-lg mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
        <div class="rounded-lg overflow-hidden shadow-md bg-white">
            <div class="px-6 py-8">
                <h3 class="text-3xl font-bold mb-4 text-purple-600">Basic</h3>
                <p class="text-lg text-gray-600 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <h2 class="text-5xl font-bold mb-8 text-purple-600">$19</h2>
                <a href="#"
                    class="bg-purple-600 text-white py-2 px-4 rounded-lg text-lg hover:bg-purple-700 transition duration-300 ease-in-out">Buy
                    Now</a>
            </div>
        </div>
        <div class="rounded-lg overflow-hidden shadow-md bg-white">
            <div class="px-6 py-8">
                <h3 class="text-3xl font-bold mb-4 text-green-600">Premium</h3>
                <p class="text-lg text-gray-600 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <h2 class="text-5xl font-bold mb-8 text-green-600">$49</h2>
                <a href="#"
                    class="bg-green-600 text-white py-2 px-4 rounded-lg text-lg hover:bg-green-700 transition duration-300 ease-in-out">Buy
                    Now</a>
            </div>
        </div>
        <div class="rounded-lg overflow-hidden shadow-md bg-white">
            <div class="px-6 py-8">
                <h3 class="text-3xl font-bold mb-4 text-yellow-600">Pro</h3>
                <p class="text-lg text-gray-600 mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <h2 class="text-5xl font-bold mb-8 text-yellow-600">$99</h2>
                <a href="#"
                    class="bg-yellow-600 text-white py-2 px-4 rounded-lg text-lg hover:bg-yellow-700 transition duration-300 ease-in-out">Buy
                    Now</a>
            </div>
        </div>
    </div>
</div>

Related Examples

Pricing section
Service/product pricing section

Sophia Baker

3 years ago

13.8k
Pricing Card

Amit Pachange

3 years ago

13.9k
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Christian Ahlin

1 year ago

2.9k
Product Pricing Section
This component displays pricing plans for your product or service. It provides a clean and visually appealing layout for showcasing different pricing tiers with their respective features and prices.

Computer guy

2 years ago

9.2k
Pricing card
Reveal details on hover

Anonymous

2 years ago

5.3k
Pricing Card with Toggle

Paul Intay

1 year ago

1.3k
Pricing card
basic pricing card with single price

Amit Pachange

3 years ago

11.3k
Pricing Plans
Js integrated Pricing Plans

ORGIN_DREAMS

1 year ago

1.4k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
Pricing table
Pricing table with background gradient

Samuel Dawson

3 years ago

11.6k
3 pricing cards

Laurits

3 years ago

15.2k