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

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

Fancy pricing card

Author:
Laurits

2 years ago

13.5k
Card
Card

Author:
Aman kumar

1 year ago

1.3k
Responsive pricing cards with heading
grid of 4 pricing cards with a Switch button for Monthly Annually plans and heading

Author:
Erik Hyatt

2 years ago

13.7k
Clean pricing cards

Author:
Freja Jensen

2 years ago

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

5 months ago

774
Basic Pricing Cards
highlight and promote different product or service plans

Author:
Anonymous

1 year ago

6.4k
Pricing card with CTA

Author:
Laurits

2 years ago

9.9k
Subscription
Subscription list

Author:
Abhiraj

7 months ago

611
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

4 months ago

567
Pricing card single

Author:
Manuela Bianka

4 months ago

432
Pricing Plans UI
A modern, responsive pricing plan cards

Author:
EliteAI Tools

9 months ago

906
Subscription Plan Cards
compare and choose between different subscription plans. It provides essential information such as plan name, price, features, and a signup button

Author:
bara masalma

9 months ago

937

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components