Home
Freja Jensen
Clean pricing cards

Clean pricing cards

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

Pricing

Author Freja Jensen

8.1k

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

Pricing card

Author:
Task Master

2 years ago

8.9k
Basic pricing card

Author:
Sienna

2 years ago

10.7k
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

6 months ago

897
Pricing Section
Our pricing plan section with 3 packages

Author:
Emdadul Islam

1 year ago

2.8k
Pricing cards - with features list
Flexible Pricing Plans Cards

Author:
Anonymous

1 year ago

4.2k
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

2.1k
Product card

Author:
Anum Shahana

11 months ago

1.3k
Pricing cards

Author:
Freja Jensen

2 years ago

10k
Pricing section - Htmlwind
Single pricing

Author:
Htmlwind

5 months ago

541
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

5 months ago

353
Basic pricing card

Author:
Sienna

2 years ago

11.2k
Pricing card

Author:
Laurits

3 years ago

10.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components