Responsive Header with Tailwind CSS
<html> <head> <title> Responsive Header with Tailwind CSS </title> <script src="https://cdn.tailwindcss.com"> </script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font awesome/5.15.3/css/all.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"/> <style> .header { transition: background color 0.3s, box shadow 0.3s; } .header.scrolled { background color: white; box shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } body { font family: 'Poppins', sans serif; } </style> </head> <body class="font sans"> <! Header > <header class="header fixed w full z 10 bg white text black"> <div class="container mx auto flex justify between items center p 4"> <! Logo > <div class="flex items center"> <img alt="Company logo with a detailed description of the logo design" class="h 10 w 10 mr 2" height="50" src="https://storage.googleapis.com/a1aa/image/FIhA13G33trtHN50qdZvYACnhd4gpGdAKiIwuzv56oFm43BF.jpg" width="50"/> <span class="text xl font bold"> Company </span> </div> <! Navigation Links for PC > <nav class="hidden md:flex space x 4"> <a class="hover:text gray 400" href="#"> Home </a> <a class="hover:text gray 400" href="#"> About </a> <div class="relative group"> <button class="hover:text gray 400"> Products </button> <div class="absolute left 0 mt 2 w 48 bg white text black rounded md shadow lg opacity 0 group hover:opacity 100 transition opacity duration 300"> <a class="block px 4 py 2 hover:bg gray 200" href="#"> Mini </a> <a class="block px 4 py 2 hover:bg gray 200" href="#"> Silver </a> <a class="block px 4 py 2 hover:bg gray 200" href="#"> Gold </a> <a class="block px 4 py 2 hover:bg gray 200" href="#"> Platinum </a> </div> </div> <a class="hover:text gray 400" href="#"> Contact Us </a> <a class="hover:text gray 400" href="#"> <button class="bg gradient to r from blue 500 to purple 500 text white px 4 py 2 rounded md flex items center"> <i class="fas fa sign in alt mr 2"> </i> Login </button> </a> </nav> <! Mobile Menu Button > <button class="md:hidden focus:outline none" id="menu toggle"> <i class="fas fa bars"> </i> </button> </div> </header> <! Mobile Menu > <div class="fixed inset 0 bg gray 800 bg opacity 75 text black transform translate x full transition transform duration 300 md:hidden" id="mobile menu"> <div class="flex justify between items center p 4 bg white shadow lg w 1/2 mt 16"> <div class="flex items center"> <img alt="Company logo with a detailed description of the logo design" class="h 10 w 10 mr 2" height="50" src="https://storage.googleapis.com/a1aa/image/FIhA13G33trtHN50qdZvYACnhd4gpGdAKiIwuzv56oFm43BF.jpg" width="50"/> <span class="text xl font bold"> Company </span> </div> <button class="focus:outline none" id="menu close"> <i class="fas fa times"> </i> </button> </div> <nav class="mt 4 space y 4 bg white w 1/2 p 4 shadow lg"> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Home </a> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> About </a> <div class="relative group"> <button class="block w full text left px 4 py 2 hover:bg gray 200 font bold" id="products toggle"> Products </button> <div class="ml 4 mt 2 space y 2 hidden" id="products menu"> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Mini </a> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Silver </a> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Gold </a> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Platinum </a> </div> </div> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> Contact Us </a> <a class="block px 4 py 2 hover:bg gray 200 font bold" href="#"> <button class="bg gradient to r from blue 500 to purple 500 text white px 4 py 2 rounded md flex items center"> <i class="fas fa sign in alt mr 2"> </i> Login </button> </a> </nav> </div> <script> const menuToggle = document.getElementById('menu toggle'); const mobileMenu = document.getElementById('mobile menu'); const menuClose = document.getElementById('menu close'); const header = document.querySelector('.header'); const productsToggle = document.getElementById('products toggle'); const productsMenu = document.getElementById('products menu'); menuToggle.addEventListener('click', () => { mobileMenu.classList.toggle(' translate x full'); }); menuClose.addEventListener('click', () => { mobileMenu.classList.add(' translate x full'); }); productsToggle.addEventListener('click', () => { productsMenu.classList.toggle('hidden'); }); window.addEventListener('scroll', () => { if (window.scrollY > 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); </script> </body> </html>
