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

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

Subscription Plan Section
Clean and modern Subscription Plan section

Author:
Nikolai

1 year ago

2.3k
Pricing section
Service/product pricing section

Author:
Sophia Baker

2 years ago

12.2k
Pricing Table with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.9k
Pricing cards in pair

Author:
Nour Haider

2 years ago

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

3 months ago

340
Card
Card

Author:
Aman kumar

1 year ago

2.1k
Pricing Table
Modern and visually appealing design

Author:
Prajwal Hallale

1 year ago

6.9k
Interactive Pricing Cards
this are pricing cards

Author:
ishimwe shadad

2 months ago

116
Fancy pricing card

Author:
Laurits

2 years ago

13.3k
Pricing cards for 3 plans

Author:
Laurits

2 years ago

9.3k
Modern pricing cards
Minimal and clean pricing cards

Author:
Paul Intay

8 months ago

878
SoungCraft
Used for making and trading songs

Author:
Frederick250

2 months ago

192

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components