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

9.1k

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

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

9 months ago

1.4k
Game
prayer game candle game light candles with your prayers

Author:
Anonymous

9 months ago

944
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

1 year ago

1.5k
Basic pricing block

Author:
Leon Bachmann

3 years ago

7.4k
Card template

Author:
Raul antonio de la cruz hernandez

2 months ago

249
Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

2 years ago

2.9k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

11 months ago

873
Pricing Plans
This plan offers access to all basic features, including unlimited projects and 24/7 support

Author:
Rathanak Phan

9 months ago

767
High-Performance Hotel Operations & AI Agent Testing Dashboard
A sophisticated, real-time command center designed for modern hotel management. This dashboard features deep integration for monitoring AI agent performance, guest sentiment, and room occupancy. Built with a "Mobile-First" philosophy, it demonstrates advanced data visualization, glassmorphism UI design, and a centralized state-management architecture. Perfect for showcasing full-stack capabilities in AI-driven automation.

Author:
Ayyamperumal S

3 weeks ago

269
Pricing cards
pricing section with 3 cards

Author:
Noob

3 years ago

12k
partql
partql

Author:
sh22gr

1 month ago

171

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components