Home
Hamza Atig
Responsive Multi-Tier Pricing Table Component

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 CSS v3. 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

1.4k

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