Home
Laurits
Simple yet stylish pricing table

Simple yet stylish pricing table

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

Pricing

Author Laurits

8.4k

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

Author:
Sophia Baker

2 years ago

12.1k
Pricing cards in pair

Author:
Nour Haider

2 years ago

12.9k
The future ai
The is technology

Author:
ORGIN_DREAMS

1 month ago

109
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.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

10.8k
Card
Card

Author:
Aman kumar

1 year ago

1.9k
Pricing table with 2 columns

Author:
Piet Vriend

2 years ago

12.5k
Horizontal pricing card

Author:
Anonymous

3 months ago

186
Clean pricing cards

Author:
Freja Jensen

2 years ago

7.9k
Pricing Table
A modern, responsive Pricing Card Component built with Tailwind CSS. Features dynamic pricing, a feature checklist, and a sleek call-to-action button. Perfect for SaaS, e-commerce, and subscription-based websites. Easily customizable and lightweight.

Author:
SHARIFUL ISLAM

4 months ago

700
3 pricing cards

Author:
Laurits

2 years ago

13.8k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

1 month ago

215

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components