Responsive Teal Header - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="dv" dir="rtl"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Javiyani Inspired Header</title> <script src="https://cdn.tailwindcss.com"></script> <style> body { font family: 'Noto Nastaliq Urdu', serif; } </style> </head> <body class="bg gray 100 text gray 900"> <! Header > <header class="bg teal 500 text white py 4"> <div class="container mx auto flex items center justify between"> <! Social Icons > <div class="flex items center space x 4 space x reverse"> <a href="#" aria label="Facebook" class="hover:text gray 200">📷</a> <a href="#" class="hover:text gray 200">Facebook</a> <a href="#" class="hover:text gray 200">Instagram</a> </div> <! Logo > <div class="text center"> <a href="/" class="text 4xl font bold">Logo</a> </div> <! Search Icon > <div class="flex items center space x 4 space x reverse"> <button class="text white focus:outline none hover:text gray 200" aria label="Search">🔍</button> </div> </div> </header> <! Centered Transparent Navbar > <nav class="bg transparent text white py 2"> <div class="container mx auto flex justify center items center px 4"> <ul class="flex space x 8 space x reverse"> <li><a href="#" class="hover:text teal 400">Home</a></li> <li><a href="#" class="hover:text teal 400">News</a></li> <li><a href="#" class="hover:text teal 400">Sports</a></li> <li><a href="#" class="hover:text teal 400">Contact</a></li> </ul> </div> </nav> </body> </html>
