Tailwind CSS Responsive Pricing Table Example

In this tutorial, we will create pricing table ui, mobile responsive pricing table section, pricing table with heroicons icon, examples with Tailwind CSS.



Example 1

Simple responsive pricing table

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Pricing Table Section </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="mx-12 space-y-12 lg:space-y-0 lg:flex lg:gap-4 lg:items-center lg:justify-center">
            <div class="max-w-sm p-8 shadow-lg">
                <h3 class="text-2xl text-center">Free Trial</h3>
                <p class="text-center">$ 0</p>
                <div>
                    <ul class="space-y-4 list-disc">
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
                    </div>
                </div>
            </div>
            <div class="max-w-sm p-8 shadow-lg text">
                <h3 class="text-2xl text-center">Basic Plan</h3>
                <p class="text-center">$ 35</p>
                <div>
                    <ul class="space-y-4 list-disc">
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
                    </div>
                </div>
            </div>
            <div class="max-w-sm p-8 shadow-lg text">
                <h3 class="text-2xl text-center">Premium Plan</h3>
                <p class="text-center">$ 50</p>
                <div>
                    <ul class="space-y-4 list-disc">
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>



Example 2

Pricing table with border style, background style and heroicons icon

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Pricing Table Section </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="mx-12 space-y-12 lg:space-y-0 lg:flex lg:gap-4 lg:items-center lg:justify-center">
            <div class="max-w-sm p-8 border-t-4 border-indigo-600 rounded shadow-lg">
                <h3 class="text-2xl text-center">Free Trial</h3>
                <p class="text-center">$ 0</p>
                <div>
                    <ul class="space-y-4 list-disc">
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
                    </div>
                </div>
            </div>
            <div class="max-w-sm p-8 text-white bg-indigo-500 shadow-lg">
                <h3 class="text-2xl text-center">Basic Plan</h3>
                <p class="text-center">$ 35</p>
                <div>
                    <ul class="space-y-4 list-disc">
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button
                            class="w-full px-2 py-2 text-indigo-900 bg-white rounded hover:bg-indigo-400 hover:text-white">Get
                            Started</button>
                    </div>
                </div>
            </div>
            <div class="max-w-sm p-8 shadow-lg ">
                <h3 class="text-2xl text-center">Premium Plan</h3>
                <p class="text-center">$ 50</p>
                <div>
                    <ul class="space-y-4">
                        <li class="flex items-center text-sm"><svg xmlns="http://www.w3.org/2000/svg"
                                class="w-6 h-6 mr-2 text-sm text-green-600" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li class="flex items-center text-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-indigo-500" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li class="flex items-center text-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-red-400" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                        <li class="flex items-center text-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2 text-gray-500" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
                            </svg>
                            Lorem ipsum dolor sit amet consectetu
                        </li>
                    </ul>
                    <div class="flex items-center justify-center mt-4">
                        <button class="w-full px-2 py-2 text-indigo-200 bg-indigo-600 rounded">Get Started</button>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>