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

Pricing Table

Akshay

4 years ago

11.4k
Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Info cards
Show various statistics on your website

Arya

4 years ago

12k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.9k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k