Pricing card

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

Pricing

Author Piet Vriend

Tailwind v3.4 9.6k 15

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

Pricing card single
Horizontal pricing card

Dika Rahman

2 years ago

3.9k
Pricing table with 2 columns

Piet Vriend

3 years ago

13.4k
Pricing section - Htmlwind
Single pricing

Htmlwind

1 year ago

1.3k
Checkout Card
A modern and responsive checkout card built with HTML & Tailwind CSS, featuring a clean UI, smooth shadows, and interactive hover effects. It includes secure payment options, a clear pricing breakdown, and adapts seamlessly to all screen sizes. Perfect for e-commerce and digital platforms to enhance user experience.

Rajesh Maheshwari

1 year ago

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

Hamza Atig

1 year ago

1.8k
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Ijila Itunu

1 year ago

1.4k
E-commerce Website UI Design
Here is a well-structured UI Design for a general e-commerce website template. This can be used as a reference for designers and developers to build or evaluate the UI components needed for an e-commerce site. View https://github.com/Rathanak-Phan/general-e-commerce-website-template

Rathanak Phan

1 year ago

2.8k
HighLight
Highlight section. Find it makecomponents.com

makecomponents

2 years ago

2.5k
Pricing cards in pair

Anonymous

3 years ago

8.2k
Subscription
Subscription list

Abhiraj

1 year ago

1.7k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

5 months ago

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

Erik Hyatt

3 years ago

14.4k