Home
Piet Vriend
Pricing card

Pricing card

This tailwind example is contributed by Piet Vriend, on 12-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Service rates, Subscription plans

Pricing

Author Piet Vriend

8.8k

Fork Fullscreen

<div class="bg-white rounded-lg shadow-md overflow-hidden max-w-xs">
    <div class="bg-purple-500 px-6 py-8">
        <h3 class="text-lg font-medium text-white">Starter Plan</h3>
        <p class="text-gray-200 mt-2">The perfect plan to get started</p>
        <p class="text-gray-200 mt-2 text-2xl font-bold">$9<span class="text-white text-base font-medium">/month</span>
        </p>
    </div>
    <div class="px-6 py-8">
        <ul class="text-gray-700 text-base leading-6">
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Unlimited users</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>10GB storage</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Email support</li>
            <li><span class="text-purple-500 font-medium mr-2">&#10003;</span>Basic analytics</li>
        </ul>
        <button class="mt-6 px-4 py-2 bg-purple-500 text-white font-medium rounded-full hover:bg-purple-600 transition duration-200">Sign up now</button>
    </div>
</div>

Related Examples

Payment form

Author:
ORGIN_DREAMS

7 months ago

526
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

1 year ago

1.2k
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

2 years ago

6.9k
Fancy pricing card

Author:
Laurits

2 years ago

13.9k
Price
Pricing

Author:
Jean Claude Nguetta

2 months ago

53
Card
Card

Author:
Aman kumar

1 year ago

2.6k
tailwind developer Portfolio
the best tailwind portfolio for the developer the best code with best output

Author:
irahoza daniel

7 months ago

438
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

Author:
Muhammad Umair Arshad

8 months ago

879
Product card

Author:
Anum Shahana

1 year ago

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

Author:
Computer guy

2 years ago

8.6k
SoungCraft
Used for making and trading songs

Author:
Frederick250

7 months ago

642
3 pricing cards
Showcase your pricing structure effectively

Author:
magersa

1 year ago

3.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components