Responsive Multi-Tier Pricing Table Component

flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

This tailwind example is contributed by Hamza Atig, on 16-Apr-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Service rates, Subscription plans,Product Showcase, Product card,simulation,copy,dummy,miniature,like

Card Pricing Other Product Grid Mockup

Author Hamza Atig

Tailwind v3.4 2.1k 3

Fork Fullscreen

<h1 class="text-3xl md:text-4xl font-bold text-center mb-4">Product Plans</h1>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-10 md:mb-16">Select the plan that best suits your
            requirements.</p>

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col border dark:border-gray-700">
                <h3 class="text-xl font-semibold mb-4">Basic Plan</h3>
                <div class="mb-6">
                    <span class="text-4xl font-bold">$0</span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">/ unit</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-6 text-sm">
                    Brief description of the basic plan and its target user.
                </p>
                <button class="w-full bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-white py-2 px-4 rounded-md font-semibold hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-200 mb-8">
                Current Plan
            </button>
                <ul class="space-y-3 text-sm feature-list text-gray-600 dark:text-gray-400 flex-grow">
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Feature Number One</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Second Included Feature</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Third Core Benefit</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Basic Feature Four</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Limited Feature Five</span>
                    </li>
                </ul>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-6 text-center">
                    Additional information or link <a href="#" class="underline hover:text-indigo-500">here</a>
                </p>
            </div>

<div
                class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col border-2 border-indigo-500 dark:border-indigo-400 relative">
                <span class="absolute top-0 right-4 -mt-3 bg-indigo-500 dark:bg-indigo-400 text-white dark:text-gray-900 text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wider">Recommended</span>
                <h3 class="text-xl font-semibold mb-4">Plus Plan</h3>
                <div class="mb-6">
                    <span class="text-4xl font-bold">$XX</span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">/ unit</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-6 text-sm">
                    Description highlighting the value proposition of the plus plan.
                </p>
                <button class="w-full bg-indigo-500 dark:bg-indigo-400 text-white dark:text-gray-900 py-2 px-4 rounded-md font-semibold hover:bg-indigo-600 dark:hover:bg-indigo-500 transition duration-200 mb-8">
                Choose Plus Plan
            </button>
                <ul class="space-y-3 text-sm feature-list text-gray-600 dark:text-gray-400 flex-grow">
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Everything in Basic Plan</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Enhanced Feature One</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Additional Feature Two</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Improved Feature Three</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Extra Benefit Four</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Priority Feature Five</span>
                    </li>
                </ul>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-6 text-center">
                    <a href="#" class="underline hover:text-indigo-500">Usage limits apply</a>
                </p>
            </div>

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex flex-col border dark:border-gray-700">
                <h3 class="text-xl font-semibold mb-4">Pro Plan</h3>
                <div class="mb-6">
                    <span class="text-4xl font-bold">$YYY</span>
                    <span class="text-sm text-gray-500 dark:text-gray-400">/ unit</span>
                </div>
                <p class="text-gray-600 dark:text-gray-300 mb-6 text-sm">
                    Comprehensive solution for advanced users or teams.
                </p>
                <button class="w-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 py-2 px-4 rounded-md font-semibold hover:bg-gray-700 dark:hover:bg-gray-200 transition duration-200 mb-8">
                Select Pro Plan
            </button>
                <ul class="space-y-3 text-sm feature-list text-gray-600 dark:text-gray-400 flex-grow">
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Everything in Plus Plan</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Premium Feature One</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Advanced Feature Two</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Exclusive Feature Three</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Top-Tier Benefit Four</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Dedicated Support Feature</span>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-5 h-5 text-green-500 mr-2 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none"
                            viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                        <span>Unlimited Feature Six</span>
                    </li>
                </ul>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-6 text-center">
                    <a href="#" class="underline hover:text-indigo-500">Learn more</a> about Pro benefits.
                </p>
            </div>

</div>

</div>
</body>

Related Examples

Watch Card
Watch Cards

Anonymous

2 years ago

2.9k
Article card

Sienna

3 years ago

13.4k
Pricing Cards
pricing section with three subscription plans

JUGENDRA GANGWAR

1 week ago

9
baseball bros
baseball

Abel Wright

8 months ago

733
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Hamza Atig

1 year ago

986
Maintenance page template
The site is under maintenance placeholder page

Anonymous

2 years ago

12.5k
User profile card

Mr Robot

3 years ago

12k
Testimonial card

Leon Bachmann

3 years ago

13k
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

84
Tailwind image grid
tailwind picture grid

Anonymous

2 years ago

11.4k
new Save Component tailwindflex
new Save Component tailwindflex

Omer fils ELENGA

5 months ago

361
Carousel Card Slider Swiper on Alpine.JS
with support drag and drop mouse actions

Maxim

2 years ago

14.3k