<body class="bg-gray-100 font-sans leading-normal tracking-normal"> <header class="bg-white shadow-md"> <div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center"> <div class="flex items-center"> <img src="https://www.tailwindai.dev/placeholder.svg" alt="Logo" class="h-10 w-10 mr-2"> <div> <h1 class="text-xl font-bold">Fast Tools Alphabetizer</h1> <p class="text-gray-500 text-sm">Your go-to tool for quick alphabetization</p> </div> </div> <nav class="relative"> <ul class="flex space-x-6"> <li class="relative group"> <button class="text-gray-700 hover:text-blue-500 focus:outline-none">Other Apps</button> <ul class="absolute left-0 hidden mt-2 w-48 bg-white shadow-lg rounded-lg group-hover:block"> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">App 1</a></li> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">App 2</a></li> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">App 3</a></li> </ul> </li> <li class="relative group"> <button class="text-gray-700 hover:text-blue-500 focus:outline-none">About</button> <ul class="absolute left-0 hidden mt-2 w-48 bg-white shadow-lg rounded-lg group-hover:block"> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Our Story</a></li> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Team</a></li> <li><a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Careers</a></li> </ul> </li> <li> <a href="#" class="text-gray-700 hover:text-blue-500">Have a Suggestion?</a> </li> <li> <a href="#" class="text-gray-700 hover:text-blue-500">Bookmark This Site!</a> </li> </ul> </nav> </div> </header> </body>