<section>
<div class="container">
<div x-data="{ open: false }" class="flex flex-col p-5 md:flex-row md:items-center md:justify-between">
<div class="flex flex-row items-center justify-between lg:justify-start">
<a href="#"
class="text-lg font-bold tracking-tighter text-blue-600 transition duration-500 ease-in-out lg:pr-8">
wickedblocks
</a>
<button class="rounded-lg focus:outline-none md:hidden" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="size-8">
<path x-show="!open" fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" style="display: none"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="hidden grow flex-col md:flex md:flex-row md:justify-end">
<ul class="list-none space-y-2 lg:inline-flex lg:items-center lg:space-y-0">
<li>
<a href="#"
class="border-b-2 border-transparent px-2 py-6 text-sm leading-[22px] text-gray-500 hover:border-blue-600 hover:text-blue-500 md:px-3 lg:px-6">
All <span class="hidden lg:inline"> templates </span>
</a>
</li>
<li>
<a href="#"
class="border-b-2 border-transparent px-2 py-6 text-sm leading-[22px] text-gray-500 hover:border-blue-600 hover:text-blue-500 md:px-3 lg:px-6">
FAQ
</a>
</li>
<li>
<a href="#"
class="border-b-2 border-transparent px-2 py-6 text-sm leading-[22px] text-gray-500 hover:border-blue-600 hover:text-blue-500 md:px-3 lg:px-6">
Free <span class="hidden lg:inline">Templates </span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
