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 single

Author:
Manuela Bianka

8 months ago

543
Pricing section
Pricing table with 3 cards for 3 plans

Author:
Leon Bachmann

3 years ago

11k
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k
Swiss-Grid Dark Pricing
A brutally minimalist pricing section that relies on strict grid architecture and typographic hierarchy instead of decorative elements. Features responsive border collapsing, monospaced technical accents, and high-performance CSS-only hover states. Designed for high-end SaaS, dev-tools, or agency portfolios that prioritize data clarity and structural rhythm.

Author:
Hamza Atig

1 month ago

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

Author:
irahoza daniel

8 months ago

537
Pricing cards in pair

Author:
Santiago Hernandez

1 year ago

2.5k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

3.6k
Pricing card
basic pricing card with single price

Author:
Amit Pachange

2 years ago

10.8k
Pricing cards pair

Author:
Samuel Dawson

3 years ago

11k
pricing card
This frontend template is designed for a website that provides software services and open-source code to users. It serves as a clean, modern UI for browsing, searching, and downloading open-source projects. Building with HTML, tailwindcss for CSS ,

Author:
Ahmath S.

4 months ago

583
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

2 years ago

6.9k
Beautiful pricing cards design (5-cards grid)

Author:
Liam Moore

2 years ago

14.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components