<h1 class="my-10 px-7 text-5xl">Large screen</h1> <nav class="flex justify-between bg-slate-400 items-center"> <div class=""> <h1 class="bg-amber-400 h-12 text-2xl font-bold px-7 flex items-center">MIHP</h1> </div> <div> <ul class="flex"> <li><a href="home" class="p-2 hover:bg-gray-100 mx-1 rounded">Home</a></li> <li><a href="about" class="p-2 hover:bg-gray-100 mx-1 rounded">About</a></li> <li><a href="projects" class="p-2 hover:bg-gray-100 mx-1 rounded">Projects</a></li> <li><a href="courses" class="p-2 hover:bg-gray-100 mx-1 rounded">Courses</a></li> <li><a href="contact" class="p-2 hover:bg-gray-100 mx-1 rounded">Contact Us</a></li> </ul> </div> </nav> <h1 class="my-10 px-7 text-5xl">Collapsed on small screen</h1> <nav class="bg-slate-400 flex flex-col justify-between items-center"> <div class="flex justify-between w-full"> <h1 class="bg-amber-400 h-12 text-2xl font-bold px-7 flex items-center">MIHP</h1> <button class="px-2 bg-yellow-200 hover:bg-lime-300">Menu Toggle <i class="icon-burger">fs</i></button> </div> <div class="bg-yellow-50 w-full"> <ul class="flex flex-col"> <li><a href="home" class="block p-2 hover:bg-gray-100">Home</a></li> <li><a href="about" class="block p-2 hover:bg-gray-100">About</a></li> <li><a href="projects" class="block p-2 hover:bg-gray-100">Projects</a></li> <li><a href="courses" class="block p-2 hover:bg-gray-100">Courses</a></li> <li><a href="contact" class="block p-2 hover:bg-gray-100">Contact Us</a></li> </ul> </div> </nav>