<'nav' class="bg-gray-800 text-retro-yellow font-retro-sans"> <'div' class="container mx-auto px-4 sm:px-6 lg:px-8"> <'div' class="flex items-center justify-between h-16"> <'div' class="flex items-center"> <'div' class="flex-shrink-0"> <'h1' class="text-2xl font-bold">RetroShop<'/h1'> <'/div'> <'div' class="hidden md:block"> <'div' class="ml-10 flex items-baseline space-x-4"> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Home<'/a'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Products<'/a'> <'div' class="relative group"> <'button' class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium focus:outline-none">Categories <'/button'> <'div' class="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2 invisible group-hover:visible"> <'div' class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden"> <'div' class="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8"> <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100"> <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro1/20/20" alt=""> <'div' class="ml-4"> <'p' class="text-base font-medium text-gray-900">Electronics<'/p'> <'/div'> <'/a'> <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100"> <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro2/20/20" alt=""> <'div' class="ml-4"> <'p' class="text-base font-medium text-gray-900">Apparel<'/p'> <'/div'> <'/a'> <'a' href="#" class="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-100"> <'img' class="flex-shrink-0 h-6 w-6 text-retro-blue" src="https://picsum.photos/seed/retro3/20/20" alt=""> <'div' class="ml-4"> <'p' class="text-base font-medium text-gray-900">Home Goods<'/p'> <'/div'> <'/a'> <'/div'> <'/div'> <'/div'> <'/div'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Contact<'/a'> <'/div'> <'/div'> <'/div'> <'div' class="-mr-2 flex md:hidden"> <'button' type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> <'span' class="sr-only">Open main menu<'/span'> <'!-- Icon when menu is closed. --> <'!-- Heroicon name: outline/menu Menu open: "hidden", Menu closed: "block" --> <'svg' class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> <'/svg'> <'!-- Icon when menu is open. --> <'!-- Heroicon name: outline/x Menu open: "block", Menu closed: "hidden" --> <'svg' class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <'path' stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> <'/svg'> <'/button'> <'/div'> <'/div'> <'/div'> <'!-- Mobile menu, show/hide based on menu state. --> <'div' class="md:hidden" id="mobile-menu"> <'div' class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home<'/a'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Products<'/a'> <'div' class="group"> <'button' class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium w-full text-left focus:outline-none">Categories <'/button'> <'div' class="pt-2 pb-3 space-y-1 px-5 invisible group-focus:visible"> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Electronics<'/a'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Apparel<'/a'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Home Goods<'/a'> <'/div'> <'/div'> <'a' href="#" class="text-retro-yellow hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">Contact<'/a'> <'/div'> <'/div'> <'/nav'>