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

7.7k

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 single

Author:
Manuela Bianka

1 week ago

14
Horiizontal Pricing Card
Single pricing plan section

Author:
ReddRadar.com

1 week ago

3
Pricing cards in pair

Author:
Anonymous

1 year ago

7.1k
Pricing table
Sleek and Modern Pricing Table with Hover Effects

Author:
Andreas Ludvigsson

1 year ago

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

1 month ago

129
SoungCraft
Used for making and trading songs

Author:
Frederick250

6 days ago

26
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

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

Author:
Anonymous

1 year ago

6.6k
Pricing Table

Author:
Akshay

2 years ago

10.2k
Pricing card single
Horizontal pricing card

Author:
Dika Rahman

1 year ago

2.2k
Pricing card for subscription

Author:
Task Master

2 years ago

10.4k
Pricing Card

Author:
Amit Pachange

2 years ago

12.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components