Create a Responsive Navbar using Tailwind CSS

In this tutorial, we will see how we can create a simple responsive Navbar or Header using only Tailwind CSS.

For this tutorial, we are going to set up a simple HTML project in which we will use Tailwind CSS.

We can use Tailwind CSS in multiple ways follow these tutorials to learn more about it.

but in this tutorial, we are going to use Tailwind CSS play CDN which is <script src="https://cdn.tailwindcss.com"></script> put this script tag inside <head> </head> tag as shown below.

 <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" />
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <title>Responsive Navbar with Tailwind CSS</title>
   </head>

now we are ready to use Tailwind CSS in our HTML project.

and below is the source code for Responsive Navbar using Tailwind CSS.

<!-- 
  Project: Responsive Navbar with Tailwind CSS
  Author: Tutorend.com
  Date: Feb 2022
 -->

 <!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" />
 
     <script src="https://cdn.tailwindcss.com"></script>
 
     <title>Responsive Navbar with Tailwind CSS</title>
   </head>
 
   <body class="bg-slate-900">
     <nav
       class="bg-slate-700 flex text-white items-center justify-between flex-wrap pb-2 px-5"
     >
       <!-- Logo -->
       <div>
         <span class="font-semibold text-4xl text-green-400">Tutorend</span>
       </div>
       <!-- Toggle button -->
       <div class="block lg:hidden">
         <button
           onclick="toggle_nav()"
           class="flex flex-col px-3 py-2 border rounded border-gray-800 hover:text-white hover:border-white"
         >
           <div class="w-6 h-1 bg-white"></div>
           <div class="w-6 h-1 bg-white my-1"></div>
           <div class="w-6 h-1 bg-white"></div>
         </button>
       </div>
 
       <!-- Nav menu -->
       <div
         class="w-full lg:w-auto block lg:flex lg:items-center lg:inline-block  hidden"
         id="navbar"
       >
         <div class="lg:flex-grow text-2xl text-center space-x-3">
           <a href="#" class="block lg:inline-block hover:text-green-400 mt-4">
             Home
           </a>
           <a href="#" class="block lg:inline-block hover:text-green-400 mt-4">
             Blog
           </a>
           <a
             href="#"
             class="block lg:inline-block hover:text-green-400 mt-4 mb-3z"
           >
             About Us
           </a>
           <a
             href="#"
             class="lg:inline-block hover:text-green-400 mt-6 border rounded border-white hover:border-transparent hover:bg-white px-4"
           >
             Login / Sign Up
           </a>
         </div>
       </div>
     </nav>
 
     <a href="https://www.youtube.com/watch?v=_L09qRbV1kU">
       <h1 class="text-center m-auto my-10 text-white text-6xl">Watch Video</h1>
     </a>
 
     <script>
       var navbar = document.getElementById("navbar");
 
       const toggle_nav = () => {
         navbar.classList.toggle("hidden");
       };
 
       // Close menu is window size increases
       window.onresize = () => {
         let viewportWidth = window.innerWidth;
         if (viewportWidth > 1050) {
           navbar.classList.add("hidden");
         }
       };
     </script>
   </body>
 </html>

that’s it for this tutorial. Happy Coding.