Pricing card

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

Pricing

Author Task Master

Tailwind v3.4 9.7k 11

Fork Fullscreen

<div class="m-4 flex flex-col justify-between p-5 bg-white border rounded shadow-sm">
    <div class="mb-6">
        <div class="flex items-center justify-between pb-6 mb-6 border-b">
            <div>
                <p class="text-sm font-bold tracking-wider uppercase">Get started for</p>
                <p class="text-5xl font-extrabold">Free</p>
            </div>
            <div class="flex items-center justify-center w-24 h-24 rounded-full bg-blue-gray-50"><svg
                    class="w-10 h-10 text-gray-600" viewBox="0 0 24 24" stroke-linecap="round" strokeLidth="2">
                    <path
                        d="M12,7L12,7 c-1.657,0-3-1.343-3-3v0c0-1.657,1.343-3,3-3h0c1.657,0,3,1.343,3,3v0C15,5.657,13.657,7,12,7z"
                        fill="none" stroke="currentColor"></path>
                    <path d="M15,23H9v-5H7v-6 c0-1.105,0.895-2,2-2h6c1.105,0,2,0.895,2,2v6h-2V23z" fill="none"
                        stroke="currentColor"></path>
                </svg>
            </div>
        </div>
        <div>
            <p class="mb-2 font-bold tracking-wide">Features</p>
            <ul class="space-y-2">
                <li class="flex items-center">
                    <div class="mr-2"><svg class="w-4 h-4 text-purple-600" viewBox="0 0 24 24" stroke-linecap="round"
                            strokeLidth="2">
                            <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
                            <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
                        </svg></div>
                    <p class="font-medium text-gray-800">Unlimited Text, Image, Song and TV posts</p>
                </li>
                <li class="flex items-center">
                    <div class="mr-2"><svg class="w-4 h-4 text-purple-600" viewBox="0 0 24 24" stroke-linecap="round"
                            strokeLidth="2">
                            <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
                            <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
                        </svg></div>
                    <p class="font-medium text-gray-800">1 Free Discussion Space per day</p>
                </li>
                <li class="flex items-center">
                    <div class="mr-2"><svg class="w-4 h-4 text-purple-600" viewBox="0 0 24 24" stroke-linecap="round"
                            strokeLidth="2">
                            <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
                            <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
                        </svg></div>
                    <p class="font-medium text-gray-800">5 Circles with unlimited members</p>
                </li>
                <li class="flex items-center">
                    <div class="mr-2"><svg class="w-4 h-4 text-purple-600" viewBox="0 0 24 24" stroke-linecap="round"
                            strokeLidth="2">
                            <polyline fill="none" stroke="currentColor" points="6,12 10,16 18,8"></polyline>
                            <circle cx="12" cy="12" fill="none" r="11" stroke="currentColor"></circle>
                        </svg></div>
                    <p class="font-medium text-gray-800">1 Free Page</p>
                </li>
            </ul>
        </div>
    </div>
    <div>
        <a href="#"
            class="inline-flex items-center justify-center w-full h-12 px-6 mb-4 font-medium tracking-wide text-white transition duration-200 bg-gray-800 rounded shadow-md hover:bg-gray-900 focus:shadow-outline focus:outline-none">Start
            for free
        </a>
        <p class="text-sm text-gray-600">Forever free plan. Feature availablity subject to change.</p>
    </div>
</div>

Related Examples

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.

Computer guy

3 years ago

9.3k
Lifetime Access — iOS 26 Style
Lifetime Access — iOS 26 Style

Omer fils ELENGA

11 months ago

628
Pricing cards pair

Samuel Dawson

3 years ago

11.2k
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
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
Responsive Pricing Table with Toggle Switch — Built with Tailwind Flex
A clean, responsive Pricing Table UI built entirely with Tailwind CSS and Flexbox. Includes a smooth monthly/yearly toggle switch, fully mobile-friendly layout, and modern design — perfect for SaaS, startups, freelancers, or any web project. 📱 100% Responsive 🎯 Easily customizable 💡 Ideal for client or personal projects

Muhammad Umair Arshad

1 year ago

1.4k
Services
explore our awesome Services

ابراهيم سيد

2 years ago

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

Sophia Baker

3 years ago

13.2k
Pricing comparison table
Showcase different pricing tiers or plans for a product or service.

Andreas Wagner

3 years ago

15.5k
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/

Achraf Testq

6 months ago

633
pricing
pricing

Omer fils ELENGA

1 year ago

1.1k