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

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

3 years ago

12.8k
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

11 months ago

1.1k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Author:
Omer fils ELENGA

1 day ago

4
multiple pricing cards
basic pricing card with single price

Author:
Amit Pachange

2 years ago

12.6k
Pricing card

Author:
Laurits

3 years ago

10.8k
Ticket Options ios 26
Ticket Options ios 26

Author:
Omer fils ELENGA

1 day ago

2
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.8k
Product card

Author:
Anum Shahana

11 months ago

1.4k
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

11.6k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.7k
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.

Author:
Computer guy

2 years ago

8.5k
"Visit Rwanda" tourism website focusing on wildlife, particularly mountain gorillas
Key Features of This Rwanda Tourism Website: Focus on Mountain Gorillas ("Ingagi"): Dedicated section highlighting gorilla trekking experiences Information about conservation efforts Booking options for gorilla permits Wildlife Showcase: Featured animals including gorillas, golden monkeys, elephants, lions, and more Beautiful image cards for each species Conservation-focused messaging National Parks Information: Sections on Volcanoes, Akagera, and Nyungwe National Parks Visual highlights of each park's unique features User Experience: Responsive design that works on all devices Attractive color scheme inspired by Rwanda's landscapes Easy navigation with clear calls-to-action Practical Information: Contact form for tour inquiries Testimonials from previous visitors Footer with important links and contact details

Author:
Code Master(Mfuranziza Dusabe Hamza)

5 months ago

689

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components