Clean pricing cards

This tailwind example is contributed by Freja Jensen, on 18-Dec-2022. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Freja Jensen

Tailwind v3.4 8.9k 14

Fork Fullscreen

<div class="max-w-screen-lg mx-auto px-4 mt-20">
    <div class="flex flex-col gap-4 md:flex-row items-center justify-center">
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Basic Plan</h2>
            <p class="text-gray-700 mb-4">Perfect for small teams or individuals</p>
            <p class="text-4xl font-bold mb-4">$10<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>10GB Storage</li>
                <li>50GB Bandwidth</li>
                <li>5 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Premium Plan</h2>
            <p class="text-gray-700 mb-4">Great for larger teams or businesses</p>
            <p class="text-4xl font-bold mb-4">$50<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>100GB Storage</li>
                <li>500GB Bandwidth</li>
                <li>20 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
        <div class="md:w-1/3 p-6 rounded-lg border">
            <h2 class="text-lg font-bold mb-2">Enterprise Plan</h2>
            <p class="text-gray-700 mb-4">Custom plans for large organizations</p>
            <p class="text-4xl font-bold mb-4">$100<span class="text-gray-500 text-lg">/month</span></p>
            <ul class="text-sm text-gray-700">
                <li>Unlimited Storage</li>
                <li>Unlimited Bandwidth</li>
                <li>50 Email Accounts</li>
                <li>24/7 Support</li>
            </ul>
            <button class="mt-8 py-3 px-6 bg-blue-500 text-white font-bold rounded-full hover:bg-blue-700 focus:outline-none focus:shadow-outline-blue transition duration-200">Get Started</button>
        </div>
    </div>
</div>

Related Examples

Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

1.9k
Product card

Anum Shahana

1 year ago

2k
Clean pricing cards

Santiago Hernandez

2 years ago

3.1k
Pricing cards in pair

Santiago Hernandez

2 years ago

2.8k
Pricing Cards
the component is designed to showcase and compare prices between different subscription plans.

Anonymous

2 years ago

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

Ayyamperumal S

8 months ago

1.1k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Hamza Atig

1 year ago

2.1k
Interactive Pricing Cards
this are pricing cards

ishimwe shadad

1 year ago

1.7k
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Rathanak Phan

1 year ago

1.3k
Basic pricing card

Sienna

3 years ago

12.1k
3 pricing cards
Showcase your pricing structure effectively

magersa

2 years ago

4.4k
Pricing table

Laurits

3 years ago

11.3k