TailwindCSS: Building a Pricing Card With Tailwind CSS (2023)

Hi everyone, In this video we’re going to build a cool pricing card ui with tailwind css. we’re going to build a pricing card from scratch.

This is the perfect video to fully understand how tailwind works.

Now if you’ve never used tailwind before that’s fine, I’m going to go over everything including how to get set up with the cli. Tailwind is one of the fastest growing and promising css framework at the moment, It is different from other frameworks such as bootstrap and foundation. I will cover all the basics of tailwind that we need…. installation, configuration, theme customization and more.

It is completely mobile responsive it’s going to work for tablet devices as well as the mobile devices and it’s going to look great on all of them. So let’s dive into it.

Video Tutorial :

Source Codes

First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.

<!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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Pricing Card</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-slate-800 text-white">
    <section>
        <div class="text-center py-20">
            <h4 class="font-bold text-emerald-500">Pricing</h4>
            <h1 class="text-3xl font-bold">Get In Reasonable Price</h1>
        </div>

        <div class="max-w-7xl mx-auto grid lg:grid-cols-3 md:grid-cols-2 gap-8 px-4 sm:px-6 lg:px-8">
            <!-- card 1  -->
            <div class="border border-gray-500 shadow-lg p-8 rounded-2xl bg-slate-900 flex flex-col">
                <p class="relative text-sm font-bold">
                    <span class="absolute top-0 left-0">$</span>
                    <span class="text-6xl pl-2">20</span>
                    <span class="font-normal">/per month</span>
                </p>

                <div class="py-10">
                    <h3 class="text-xl font-bold pb-3">Basic</h3>
                    <p class="text-sm leading-6">For Beginner Who Want To Scale Business Globaly</p>
                </div>

                <ul class="pb-10 space-y-4 flex-1">
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Expense Management</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Card Management</span>
                    </li>
                </ul>

                <a href="#" class="mt-8 block rounded-lg bg-emerald-500 px-6 py-4 text-center text-sm font-semibold leading-4 shadow-md hover:bg-emerald-700">Get Started</a>
            </div>

            <!-- card 2  -->
            <div class="relative border border-gray-500 shadow-lg p-8 rounded-2xl bg-slate-900 flex flex-col">

                <p class="absolute top-0 -translate-y-1/2 bg-emerald-500 px-3 py-0.5 text-sm font-semibold tracking-wide rounded-full shadow-md">Most Popular</p>

                <p class="relative text-sm font-bold">
                    <span class="absolute top-0 left-0">$</span>
                    <span class="text-6xl pl-2">50</span>
                    <span class="font-normal">/per month</span>
                </p>

                <div class="py-10">
                    <h3 class="text-xl font-bold pb-3">Standard</h3>
                    <p class="text-sm leading-6">For Beginner Who Want To Scale Business Globaly</p>
                </div>

                <ul class="pb-10 space-y-4 flex-1">
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Expense Management</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Card Management</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Instant Statistics</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Bookmark Function</span>
                    </li>
                </ul>

                <a href="#" class="mt-8 block rounded-lg bg-emerald-500 px-6 py-4 text-center text-sm font-semibold leading-4 shadow-md hover:bg-emerald-700">Get Started</a>
            </div>


            <!-- card 3  -->
            <div class="border border-gray-500 shadow-lg p-8 rounded-2xl bg-slate-900 flex flex-col">
                <p class="relative text-sm font-bold">
                    <span class="absolute top-0 left-0">$</span>
                    <span class="text-6xl pl-2">100</span>
                    <span class="font-normal">/per month</span>
                </p>

                <div class="py-10">
                    <h3 class="text-xl font-bold pb-3">Premium</h3>
                    <p class="text-sm leading-6">For Beginner Who Want To Scale Business Globaly</p>
                </div>

                <ul class="pb-10 space-y-4 flex-1">
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Expense Management</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Card Management</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Instant Statistics</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Bookmark Function</span>
                    </li>
                    <li class="flex items-center text-sm leading-6">
                        <i class="fa-solid fa-bookmark text-emerald-500"></i>
                        <span class="pl-4">Accounting System</span>
                    </li>
                </ul>

                <a href="#" class="mt-8 block rounded-lg bg-emerald-500 px-6 py-4 text-center text-sm font-semibold leading-4 shadow-md hover:bg-emerald-700">Get Started</a>
            </div>

        </div>
    </section>
</body>
</html>