<div x-data="{ mobileNavOpen: false }">
<nav>
<div class="flex h-12 py-3 px-6 items-center justify-between bg-green-500">
<div class="w-auto">
<a class="inline-flex mr-6 items-center hover:text-indigo-500" href="mailto:contact@shopalux.com">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.76002 0.973331L3.74002 2.97333C-0.306649 4.32666 -0.306649 6.53333 3.74002 7.88L5.52668 8.47333L6.12002 10.26C7.46668 14.3067 9.68002 14.3067 11.0267 10.26L13.0333 4.24666C13.9267 1.54666 12.46 0.0733314 9.76002 0.973331ZM9.97335 4.56L7.44002 7.10666C7.34002 7.20667 7.21335 7.25333 7.08668 7.25333C6.96002 7.25333 6.83335 7.20667 6.73335 7.10666C6.54002 6.91333 6.54002 6.59333 6.73335 6.4L9.26668 3.85333C9.46002 3.66 9.78002 3.66 9.97335 3.85333C10.1667 4.04666 10.1667 4.36666 9.97335 4.56Z" fill="currentColor"></path>
</svg>
<span class="hidden lg:block ml-2 text-sm font-bold">contact@shopalux.com</span>
</a>
<a class="inline-flex items-center hover:text-indigo-500" href="#">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.36665 9.96668L6.13331 11.2C5.87331 11.46 5.45998 11.46 5.19331 11.2067C5.11998 11.1333 5.04665 11.0667 4.97331 10.9933C4.28665 10.3 3.66665 9.57334 3.11331 8.81334C2.56665 8.05334 2.12665 7.29334 1.80665 6.54001C1.49331 5.78001 1.33331 5.05334 1.33331 4.36001C1.33331 3.90668 1.41331 3.47334 1.57331 3.07334C1.73331 2.66668 1.98665 2.29334 2.33998 1.96001C2.76665 1.54001 3.23331 1.33334 3.72665 1.33334C3.91331 1.33334 4.09998 1.37334 4.26665 1.45334C4.43998 1.53334 4.59331 1.65334 4.71331 1.82668L6.25998 4.00668C6.37998 4.17334 6.46665 4.32668 6.52665 4.47334C6.58665 4.61334 6.61998 4.75334 6.61998 4.88001C6.61998 5.04001 6.57331 5.20001 6.47998 5.35334C6.39331 5.50668 6.26665 5.66668 6.10665 5.82668L5.59998 6.35334C5.52665 6.42668 5.49331 6.51334 5.49331 6.62001C5.49331 6.67334 5.49998 6.72001 5.51331 6.77334C5.53331 6.82668 5.55331 6.86668 5.56665 6.90668C5.68665 7.12668 5.89331 7.41334 6.18665 7.76001C6.48665 8.10668 6.80665 8.46001 7.15331 8.81334C7.21998 8.88001 7.29331 8.94668 7.35998 9.01334C7.62665 9.27334 7.63331 9.70001 7.36665 9.96668Z" fill="currentColor"></path>
<path d="M14.6467 12.22C14.6467 12.4067 14.6134 12.6 14.5467 12.7867C14.5267 12.84 14.5067 12.8933 14.48 12.9467C14.3667 13.1867 14.22 13.4133 14.0267 13.6267C13.7 13.9867 13.34 14.2467 12.9334 14.4133C12.9267 14.4133 12.92 14.42 12.9134 14.42C12.52 14.58 12.0934 14.6667 11.6334 14.6667C10.9534 14.6667 10.2267 14.5067 9.46002 14.18C8.69336 13.8533 7.92669 13.4133 7.16669 12.86C6.90669 12.6667 6.64669 12.4733 6.40002 12.2667L8.58002 10.0867C8.76669 10.2267 8.93336 10.3333 9.07336 10.4067C9.10669 10.42 9.14669 10.44 9.19336 10.46C9.24669 10.48 9.30002 10.4867 9.36002 10.4867C9.47336 10.4867 9.56002 10.4467 9.63336 10.3733L10.14 9.87332C10.3067 9.70665 10.4667 9.57999 10.62 9.49999C10.7734 9.40665 10.9267 9.35999 11.0934 9.35999C11.22 9.35999 11.3534 9.38665 11.5 9.44665C11.6467 9.50665 11.8 9.59332 11.9667 9.70665L14.1734 11.2733C14.3467 11.3933 14.4667 11.5333 14.54 11.7C14.6067 11.8667 14.6467 12.0333 14.6467 12.22Z" fill="currentColor"></path>
</svg>
<span class="hidden lg:block ml-2 text-sm font-bold">+1-202-555-0147</span>
</a>
</div>
<div class="w-auto">
<div class="flex items-center">
<div class="hidden lg:inline-flex mr-4 flex-wrap items-center">
<button class="relative group inline-flex items-center text-left text-sm font-bold text-gray-900 hover:text-indigo-500">
<span class="mr-2">English</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
<div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">German</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">English</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Polish</a></div>
</div>
</button>
</div>
<div class="hidden lg:inline-flex mr-4 flex-wrap items-center">
<button class="relative group inline-flex items-center text-left text-sm font-bold text-gray-900 hover:text-indigo-500">
<span class="mr-2">USD</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
<div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">PLN</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">GBP</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">USD</a></div>
</div>
</button>
</div>
<a class="inline-flex mr-4 flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.99999 8.00001C9.84094 8.00001 11.3333 6.50763 11.3333 4.66668C11.3333 2.82573 9.84094 1.33334 7.99999 1.33334C6.15904 1.33334 4.66666 2.82573 4.66666 4.66668C4.66666 6.50763 6.15904 8.00001 7.99999 8.00001Z" fill="currentColor"></path>
<path d="M8 9.66666C4.66 9.66666 1.94 11.9067 1.94 14.6667C1.94 14.8533 2.08667 15 2.27334 15H13.7267C13.9133 15 14.06 14.8533 14.06 14.6667C14.06 11.9067 11.34 9.66666 8 9.66666Z" fill="currentColor"></path>
</svg>
<span class="hidden lg:block ml-2 text-sm font-bold">Profile</span>
</a>
<a class="inline-flex mr-4 flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.96001 0.0666809C8.75334 0.0666809 7.67334 0.653348 7.00001 1.55335C6.32668 0.653348 5.24668 0.0666809 4.04001 0.0666809C1.99334 0.0666809 0.333344 1.73335 0.333344 3.79335C0.333344 4.58668 0.46001 5.32001 0.68001 6.00001C1.73334 9.33335 4.98001 11.3267 6.58668 11.8733C6.81334 11.9533 7.18668 11.9533 7.41334 11.8733C9.02001 11.3267 12.2667 9.33335 13.32 6.00001C13.54 5.32001 13.6667 4.58668 13.6667 3.79335C13.6667 1.73335 12.0067 0.0666809 9.96001 0.0666809Z" fill="currentColor"></path>
</svg>
<span class="hidden lg:block ml-2 text-sm font-bold">Wishlist</span>
</a>
<a class="inline-flex flex-wrap items-center text-gray-900 hover:text-indigo-500" href="#">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.8267 3.72H12.56L10.3067 1.46667C10.1267 1.28667 9.83334 1.28667 9.64668 1.46667C9.46668 1.64667 9.46668 1.94 9.64668 2.12667L11.24 3.72H4.76001L6.35334 2.12667C6.53334 1.94667 6.53334 1.65333 6.35334 1.46667C6.17334 1.28667 5.88001 1.28667 5.69334 1.46667L3.44668 3.72H3.18001C2.58001 3.72 1.33334 3.72 1.33334 5.42667C1.33334 6.07333 1.46668 6.5 1.74668 6.78C1.90668 6.94666 2.10001 7.03333 2.30668 7.08C2.50001 7.12666 2.70668 7.13333 2.90668 7.13333H13.0933C13.3 7.13333 13.4933 7.12 13.68 7.08C14.24 6.94666 14.6667 6.54667 14.6667 5.42667C14.6667 3.72 13.42 3.72 12.8267 3.72Z" fill="currentColor"></path>
<path d="M12.7 8H3.24667C2.83334 8 2.52 8.36667 2.58667 8.77333L3.14667 12.2C3.33333 13.3467 3.83333 14.6667 6.05333 14.6667H9.79333C12.04 14.6667 12.44 13.54 12.68 12.28L13.3533 8.79333C13.4333 8.38 13.12 8 12.7 8ZM7.07333 12.3C7.07333 12.56 6.86667 12.7667 6.61334 12.7667C6.35334 12.7667 6.14667 12.56 6.14667 12.3V10.1C6.14667 9.84667 6.35334 9.63333 6.61334 9.63333C6.86667 9.63333 7.07333 9.84667 7.07333 10.1V12.3ZM9.92667 12.3C9.92667 12.56 9.72 12.7667 9.46 12.7667C9.20667 12.7667 8.99334 12.56 8.99334 12.3V10.1C8.99334 9.84667 9.20667 9.63333 9.46 9.63333C9.72 9.63333 9.92667 9.84667 9.92667 10.1V12.3Z" fill="currentColor"></path>
</svg>
<span class="hidden lg:block ml-2 text-sm font-bold">Basket</span>
</a>
</div>
</div>
</div>
<div class="flex h-20 py-3 px-6 items-center justify-between bg-white">
<div class="hidden lg:inline-flex items-center">
<a class="inline-block text-2xl font-bold mr-10" href="#">
<img src="shopal-assets/logos/shopal-logo.svg" alt="">
</a>
<ul class="flex items-center">
<li class="mr-6">
<button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
<span class="mr-2">Home</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
<div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
</div>
</button>
</li>
<li class="mr-6">
<button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
<span class="mr-2">Pages</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
<div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
</div>
</button>
</li>
<li class="mr-6">
<button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
<span class="mr-2">Products</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
<div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
</div>
</button>
</li>
<li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Blog</a></li>
<li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Shop</a></li>
<li class="mr-6"><a class="inline-block font-bold text-black hover:text-indigo-500" href="#">Contact</a></li>
</ul>
</div>
<div class="hidden md:inline-block w-auto">
<div class="flex h-10 px-4 py-2 items-center border-2 border-gray-900 rounded-md">
<input class="text-sm font-bold placeholder-gray-900 outline-none bg-transparent" type="search" placeholder="Search now...">
<button class="inline-block" type="submit">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 20C15.9706 20 20 15.9706 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20Z" stroke="#292929" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M18.9299 20.6898C19.4599 22.2898 20.6699 22.4498 21.5999 21.0498C22.4499 19.7698 21.8899 18.7198 20.3499 18.7198C19.2099 18.7098 18.5699 19.5998 18.9299 20.6898Z" stroke="#292929" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
<div class="lg:hidden ml-auto">
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="flex items-center text-black hover:text-indigo-500">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 12H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M3 6H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
</div>
</nav>
<div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
<nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
<div class="flex flex-col px-6 h-full">
<a class="inline-block ml-4 mb-7" href="#">
<img src="shopal-assets/logos/shopal-logo.svg" alt="">
</a>
<ul class="w-full mb-auto pb-16">
<li class="mb-6">
<button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
<span class="mr-2">Category</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
</button>
</li>
<li class="mb-6">
<button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
<span class="mr-2">Pages</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
</button>
</li>
<li class="mb-6">
<button class="relative group inline-flex flex-wrap items-center text-left text-base font-bold text-black">
<span class="mr-2">Products</span>
<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
</svg>
<div class="hidden group-hover:block w-full pt-2 px-2"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a></div>
</button>
</li>
<li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Blog</a></li>
<li class="mb-6"><a class="inline-block pl-1 font-bold" href="#">Shop</a></li>
<li><a class="inline-block pl-1 font-bold" href="#">Contact</a></li>
</ul>
<div class="w-full">
<button class="block w-full py-4 px-4 mb-4 font-bold border-2 border-gray-900 rounded-md shadow">Log in</button>
<button class="block w-full py-4 px-4 mb-8 font-bold border-2 border-gray-900 rounded-md shadow text-gray-900 bg-green-500">Sign up</button>
<p class="pl-2 text-sm">2022 © Shuffle</p>
</div>
</div>
</nav>
</div>
</div>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
