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 10.1k 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
Product / Service pricing section

Sophia Baker

3 years ago

13.2k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

irahoza daniel

1 year ago

1.4k
Fancy pricing card

Laurits

3 years ago

14.6k
pricing Nos Collections du Monde
pricing Nos Collections du Monde

Omer fils ELENGA

7 months ago

433
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

478
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
Price
Pricing

Jean Claude Nguetta

1 year ago

722
Clean pricing cards

Freja Jensen

3 years ago

8.9k
partql
partql

sh22gr

8 months ago

866
Modern pricing cards
Minimal and clean pricing cards

Paul Intay

1 year ago

1.8k
Pricing cards pair

Samuel Dawson

3 years ago

11.2k