Tailwind CSS Responsive Navbar

Hello Readers, Welcome to my other Blog, today in this Blog I'm going to create a Tailwind CSS responsive navbar. In this post we will learn how to create a simple and full responsive navbar using CSS Tailwind framework.

Video Tutorial Of Tailwind CSS Responsive Navbar:

Source Code:

index.html

<!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 Responsive Navbar - Sagar Developer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>

<body class="bg-blue-500">
    <nav class="p-5 bg-white shadow md:flex md:items-center md:justify-between">
        <div class="flex justify-between items-center">
            <a href="index.html" class="text-2xl font-[Popp] cursor-pointer">
                <img src="/logo.png" class="h-10 inline" alt="">CodePrism
            </a>
            <span class="text-3xl cursor-pointer md:hidden mx-2 block">
                <ion-icon name="menu" onclick="Menu(this)"></ion-icon>
            </span>
        </div>
        <ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-white w-full left-0 md:w-auto md:py-0 py-0 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500">
            <li class="mx-4 my-6 md:my-0">
                <a href="#" class="text-xl hover:text-red-500 duration-500">Home</a>
            </li>
            <li class="mx-4 my-6 md:my-0">
                <a href="#" class="text-xl hover:text-red-500 duration-500">About</a>
            </li>
            <li class="mx-4 my-6 md:my-0">
                <a href="#" class="text-xl hover:text-red-500 duration-500">Service</a>
            </li>
            <li class="mx-4 my-6 md:my-0">
                <a href="#" class="text-xl hover:text-red-500 duration-500">Blog</a>
            </li>
            <li class="mx-4 my-6 md:my-0">
                <a href="#" class="text-xl hover:text-red-500 duration-500">Contact</a>
            </li>
            <button class="px-6 py-2 mx-4 bg-red-500 text-white font-[Poppins] rounded hover:bg-red-400">Get
                Start</button>
        </ul>
    </nav>
    <script>
        function Menu(e) {
            let list = document.querySelector('ul');
            e.name === 'menu' ? (e.name = "close", list.classList.add('top-[80px]'), list.classList.add('opacity-100')) : (e.name = "menu", list.classList.remove('top-[80px]'), list.classList.remove('opacity-100'))
        }
    </script>
</body>

</html>

Sagar Developer

Tailwind CSS Responsive Navbar

0/Post a Comment/Comments

Post a Comment

About Us

Contact Form

Tailwind CSS Responsive Navbar

Related Posts

0/Post a Comment/Comments

Post a Comment

Contact Form