<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
<nav class="relative bg-purple-50 px-10 lg:px-32 py-7 lg:py-4">
<div class="flex items-center justify-between">
<button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-block order-1 lg:order-none">
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="14" viewBox="0 0 34 14" fill="none"><g clip-path="url(#clip0_231_4713)"><rect width="34" height="3" rx="1.5" fill="#19191B"></rect><rect y="11" width="34" height="3" rx="1.5" fill="#19191B"></rect></g><defs><clipPath id="clip0_231_4713"><rect width="34" height="14" fill="white"></rect></clipPath></defs></svg>
</button>
<a class="lg:absolute lg:top-1/2 lg:left-1/2 lg:transform lg:-translate-y-1/2 lg:-translate-x-1/2 pr-4 lg:pr-0" href="#">
<img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.svg" alt="">
</a>
<div class="hidden lg:flex items-center gap-5"><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
</div>
</nav>
<div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-xs z-50">
<div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-black opacity-20"></div>
<nav class="relative p-8 w-full h-full bg-white overflow-y-auto">
<div class="flex flex-col justify-between h-full">
<div class="flex items-center justify-between mb-16">
<a class="pr-4" href="#">
<img class="h-10" src="mirga-assets/images/logos/mirga-dark-logo3.svg" alt="">
</a>
<button x-on:click="mobileNavOpen = !mobileNavOpen">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 18L18 6M6 6L18 18" stroke="#252E4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</div>
<div class="flex flex-col items-center gap-2"><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-lg focus:text-neutral-900 bg-transparent hover:bg-transparent focus:bg-transparent border border-transparent rounded-lg focus:ring-4 focus:ring-transparent transition duration-200" href="#">Login</a><a class="inline-flex justify-center items-center text-center w-full h-16 p-5 font-semibold tracking-tight text-xl hover:text-white focus:text-white bg-transparent hover:bg-neutral-900 focus:bg-neutral-900 border border-neutral-900 rounded-lg focus:ring-4 focus:ring-neutral-400 transition duration-200" href="#">Sign up free</a></div>
</div>
</nav>
</div>
</section>
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
