sandwich menu with tailwind
1
2
3
4
5
6
7
8
9 <header x-data="{ mobileMenuOpen : false }" class="flex flex-wrap flex-row justify-between md:items-center md:space-x-4 bg-white py-6 px-6 relative">
<a href="#" class="block">
<span class="sr-only">themes.dev</span>
<img class="h-6 md:h-8" src="/images/themesdev-logo-dark.svg" alt="Themes.dev Logo" title="Themes.dev Logo">
</a>
<button @click="mobileMenuOpen = !mobileMenuOpen" class="inline-block md:hidden w-8 h-8 bg-gray-200 text-gray-600 p-1">
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path 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-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</button>
<nav class="absolute md:relative top-16 left-0 md:top-0 z-20 md:flex flex-col md:flex-row md:space-x-6 font-semibold w-full md:w-auto bg-white shadow-md rounded-lg md:rounded-none md:shadow-none md:bg-transparent p-6 pt-0 md:p-0"
:class="{ 'flex' : mobileMenuOpen , 'hidden' : !mobileMenuOpen}" @click.away="mobileMenuOpen = false"
>
<a href="#" class="block py-1 text-indigo-600 hover:underline">Home</a>
<a href="#" class="block py-1 text-gray-600 hover:underline">About us</a>
<a href="#" class="block py-1 text-gray-600 hover:underline">Services</a>
<a href="#" class="block py-1 text-gray-600 hover:underline">Blog</a>
<a href="#" class="block py-1 text-gray-600 hover:underline">Contact</a>
</nav>
</header>
<article class="text-lg px-6 py-6 text-gray-600 mx-auto max-w-2xl">
<h2 class="text-xl font-semibold">Page title</h2>
<p class="mt-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet lorem in libero faucibus euismod nec in metus. Quisque at facilisis magna. Donec rhoncus bibendum tincidunt. Vestibulum non orci eget dolor eleifend mollis eu sit amet nunc. Cras malesuada sem nec malesuada cursus.
</p>
<p class="mt-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet lorem in libero faucibus euismod nec in metus. Quisque at facilisis magna. Donec rhoncus bibendum tincidunt. Vestibulum non orci eget dolor eleifend mollis eu sit amet nunc. Cras malesuada sem nec malesuada cursus.
</p>
</article>
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28