Fix top buttons on scroll of list below - css
There is a "header" on this list that I need locked. Below them is a user list that can scroll but the div's above need to stay fixed. I cannot figure out what I am doing wrong and its driving me mad.
Bonus points if you can figure out why the 5 small buttons are not spaced properly cause I cant figure that out either. All of this is done in tailwind. I know there is a lot of code but it seemed easier to give a real world set as opposed to all the JavaScript to create that code. I have also included an image to show you the issue
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<aside class="hidden w-80 bg-gray-100 shadow-2xl border-l border-gray-200 dark:border-gray-800 overflow-y-auto lg:block">
<div>
<div class="sm:hidden">
<label for="userlists" class="sr-only">Select a tab</label>
<select id="userlists" name="userlists" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-800">
<option>All</option>
<option>Watching</option>
</select>
</div>
<!--User List Filter -->
<div class="hidden sm:block">
<nav class="relative z-0 shadow flex divide-x divide-gray-200 dark:divide-gray-800" aria-label="UserLists">
<a href="#" class="text-gray-900 dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10" aria-current="page">
<span>All</span>
<span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 hover:dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10">
<span>Watching</span>
<span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
</nav>
</div>
<div class="justify-evenly">
<span class="relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
</span>
</div>
</div>
<!--User List Users -->
<ul class="flex-1 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto dark:bg-gray-900">
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-gray-300 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RKMAdmin</p>
<p class="text-sm text-gray-500 truncate">New York City, USA</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-3" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
</ul>
</aside>
Use sticky top-0 bg-white z-10 on parent.
Second issue is, you're not using the space-evenly together with flex. Move it next to the inline-flex container.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />
<aside class="max-h-60 w-80 bg-gray-100 shadow-2xl border-l border-gray-200 dark:border-gray-800 overflow-y-auto lg:block">
<div class="sticky top-0 bg-white z-10">
<div>
<label for="userlists" class="sr-only">Select a tab</label>
<select id="userlists" name="userlists" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-800">
<option>All</option>
<option>Watching</option>
</select>
</div>
<!--User List Filter -->
<div class="sm:block">
<nav class="relative z-0 shadow flex divide-x divide-gray-200 dark:divide-gray-800" aria-label="UserLists">
<a href="#" class="text-gray-900 dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10" aria-current="page">
<span>All</span>
<span aria-hidden="true" class="bg-indigo-500 absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
<a href="#" class="text-gray-500 hover:text-gray-700 hover:dark:text-gray-50 group relative min-w-0 flex-1 overflow-hidden bg-white dark:bg-gray-900 py-4 px-4 text-sm font-medium text-center hover:bg-gray-50 dark:hover:bg-gray-700 dark:hover:text-gray-50 focus:z-10">
<span>Watching</span>
<span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span>
</a>
</nav>
</div>
<div>
<span class="relative z-0 inline-flex justify-evenly w-full shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-5 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-6 py-2 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</button>
</span>
</div>
</div>
<!--User List Users -->
<ul class="flex-1 divide-y divide-gray-200 dark:divide-gray-800 overflow-y-auto dark:bg-gray-900">
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-green-400 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RealGayRedneck</p>
<p class="text-sm text-gray-500 truncate">Toronto, Canada</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
<li>
<div class="relative group py-6 px-5 flex items-center">
<a href="#" class="-m-1 flex-1 block p-1">
<div class="absolute inset-0 group-hover:bg-gray-50" aria-hidden="true"></div>
<div class="flex-1 flex items-center min-w-0 relative">
<span class="flex-shrink-0 inline-block relative">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<span class="bg-gray-300 absolute top-0 right-0 block h-2.5 w-2.5 rounded-full ring-2 ring-white" aria-hidden="true"></span>
</span>
<div class="ml-4 truncate">
<p class="text-sm font-medium text-gray-900 dark:text-gray-50 truncate">RKMAdmin</p>
<p class="text-sm text-gray-500 truncate">New York City, USA</p>
</div>
</div>
</a>
<div class="ml-2 flex-shrink-0 relative inline-block text-left">
<button id="headlessui-menu-button-3" type="button" aria-haspopup="true" class="group relative w-14 h-8 bg-white rounded-full inline-flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="sr-only">Open options menu</span>
<span class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center h-full w-full rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-gray-400 dark:text-gray-300 dark:hover:text-gray-400 group-hover:text-gray-500">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
</svg>
</span>
</button>
<!---->
</div>
</div>
</li>
</ul>
</aside>
Related
data-dropdown-toggle does not open user-dropdown using Tailwind CSS
I have a Next.JS project and would like to create a navigation bar similar to the one on Flowbite
const NavBar = () => {
return (
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
<div className="container flex flex-wrap items-center justify-between mx-auto">
<a href="https://flowbite.com/" className="flex items-center">
<img src="https://flowbite.com/docs/images/logo.svg" className="h-6 mr-3 sm:h-9" alt="Flowbite Logo" />
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<div className="flex items-center md:order-2">
<button type="button" className="flex mr-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600" id="user-menu-button" aria-expanded="false" data-dropdown-toggle="user-dropdown" data-dropdown-placement="bottom">
<span className="sr-only">Open user menu</span>
<img className="w-8 h-8 rounded-full" src="https://www.gravatar.com/avatar/357aeb5f4812fb9f69b0e21766c3b31b?s=48&d=identicon&r=PG&f=1" alt="user photo" />
</button>
<div className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600" id="user-dropdown">
<div className="px-4 py-3">
<span className="block text-sm text-gray-900 dark:text-white">Bonnie Green</span>
<span className="block text-sm font-medium text-gray-500 truncate dark:text-gray-400">name#flowbite.com</span>
</div>
<ul className="py-1" aria-labelledby="user-menu-button">
<li>
Dashboard
</li>
<li>
Settings
</li>
<li>
Earnings
</li>
<li>
Sign out
</li>
</ul>
</div>
<button data-collapse-toggle="mobile-menu-2" type="button" className="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
<span className="sr-only">Open main menu</span>
<svg className="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="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" clipRule="evenodd"></path></svg>
</button>
</div>
</div>
</nav>
)
}
export default NavBar
However, clicking on user's Gravatar does not reveal the drop-down menu/list.
Why does when I click on the map I get the map bigger using Chrome?
I am working with leaflet and when I click on the map, the map is bigger with the Chrome browser I don't know why.
Here is my code :
import "./styles.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
const App = () => {
return (
<>
<div className="App overflow-hidden">
<nav className="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-900">
<div className="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" className="flex items-center">
<img
src="https://flowbite.com/docs/images/logo.svg"
className="mr-3 h-6 sm:h-9"
alt="Flowbite Logo"
/>
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
Flowbite
</span>
</a>
<button
data-collapse-toggle="navbar-default"
type="button"
className="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
aria-controls="navbar-default"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="w-6 h-6"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="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"
clipRule="evenodd"
></path>
</svg>
</button>
<div
className="hidden w-full md:block md:w-auto"
id="navbar-default"
>
<ul className="flex flex-col p-4 mt-4 bg-gray-50 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white"
aria-current="page"
>
Home
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
About
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Services
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Pricing
</a>
</li>
<li>
<a
href="/#"
className="block py-2 pr-4 pl-3 text-gray-700 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
>
Contact
</a>
</li>
</ul>
</div>
</div>
</nav>
<div
className="flex-wrap sm:flex-nowrap
items-start container flex justify-between items-center mx-auto px-2 sm:px-4 py-2.5"
>
<select
id="countries"
className="block ml-4 mr-4 mb-2 sm:mb-0 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
<select
id="countries"
className="block ml-4 mr-4 py-2 pr-4 pl-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
>
<option selected>Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</div>
<div style={{ height: "60vh" }}>
<MapContainer
className="m-10"
center={[51.505, -0.09]}
zoom={13}
scrollWheelZoom={true}
>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[51.505, -0.09]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</MapContainer>
</div>
</div>
</>
);
};
export default App;
I thought it was a problem with the property overflow so I decided to comment that line but I get the same behaviour.
You can see the full project :
The full project
Could you help me please ?
Thank you very much !
I got it to work when I remove the class overflow-hidden in the first div.
CSS Grid items not aligned as one row in Django template with tailwind-css
I am new to Django and ran into this issue.
so basically I am making an app where I have to display rooms on the main home page.
The rooms are generated dynamically and are stored in the database that are fetched for the home page like this (in the views.py)
def home(request):
return render(request, 'base/index.html', {'rooms':rooms})
then the index.html will display the data in the form of cards using jinja for loop, something like this, just ignore the classes and all that, they are just dummy images, here I am using tailwind-css for styling
{% for room in rooms %}
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
{% endfor %}
I am using tailwindcss for styling, and the display grid doesn't seem to work with this, I have added grid-cols-4 for large screens, which means 4 columns of 1 fr so that 4 divs can be placed in 1 line, but only 1 is being placed and rest just goes to different line. (red borders are for troubleshooting)
In my understanding, the css applied is not able to detect the dynamically generated set of data, and consider only 1 card.
How to fix this and make 3-4 dynamically generated grid items to be in one row?
I think you made a mistake while calling a loop. I don't know how Django works but you should call the loop after the first div. So some pseudo-code can be like this
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
.
.
.
</div>
<!-- call ends here -->
</div>
Below I am adding the tailwindcss code , since I can’t apply loop here so I just copy-paste the 4 cards code repetitively
<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-1 md:grid-cols-3 border-4 lg:grid-cols-4 sm:grid-cols-2 gap-10">
<!-- call loop here or use something like "map function" equivalent in django-->
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
</div>
Maybe the problem with the position where you put loop, change your code like this to make loop work inside the grid
<div class="grid grid-cols-1 md:grid-cols-3 border-4 border-red-400 lg:grid-cols-4 sm:grid-cols-2 gap-10">
{% for room in rooms %}
<div class="rounded overflow-hidden border-4 border-red-400 shadow-lg">
<a href="/room/{{room.id}}">
<div class="relative">
<img class="w-full"
src="https://images.pexels.com/photos/196667/pexels-photo-196667.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Sunset in the mountains">
<div
class="hover:bg-transparent transition duration-300 absolute bottom-0 top-0 right-0 left-0 bg-gray-900 opacity-25">
</div>
<a href="#!">
<div
class="absolute bottom-0 left-0 bg-indigo-600 px-4 py-2 text-white text-sm hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
{{room.id}}
</div>
</a>
<a href="!#">
<div
class="text-sm absolute top-0 right-0 bg-indigo-600 px-4 text-white rounded-full h-16 w-16 flex flex-col items-center justify-center mt-3 mr-3 hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out">
<span class="font-bold">27</span>
<small>March</small>
</div>
</a>
</div>
</a>
<div class="px-6 py-4">
<a href="#"
class="font-semibold text-lg inline-block hover:text-indigo-600 transition duration-500 ease-in-out">{{room.name}}</a>
<p class="text-gray-500 text-sm">
{{room.desc}}
</p>
</div>
<div class="px-6 py-4 flex flex-row items-center">
<span href="#" class="py-1 text-sm font-regular text-gray-900 mr-1 flex flex-row items-center">
<svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512"
style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z" />
</g>
</g>
</svg>
<span class="ml-1">6 mins ago</span></span>
</div>
</div>
{% endfor %}
</div>
Menu hidden by DIV Tailwind
I do not understand what I am doing wrong (Im a backend guy though). Using Tailwind on VueJS, This menu wont appear above the DIV. I have tried z-index and everything but nothing will make it appear. When I try and force the menu to the front of the screen it wont appear. I have no idea what I am doing wrong. Image Attached of issue <section class="bg-white dark:bg-gray-800 min-w-0 flex-1 h-auto flex flex-col lg:order-last"> <div> <ul class="divide-y divide-gray-200"> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p> </div> </div> </div> </li> <li class="bg-green-400 bg-opacity-50 py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1566753323558-f4e0952af115?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fG1hbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-green-400 bg-opacity-50 py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50">mention</p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Leslie Alexander</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-white py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50"></p> </div> </div> </div> </li> <li class="bg-red-500 bg-opacity-50 text-gray-50 py-4 px-4"> <div class="flex space-x-3"> <img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt=""> <div class="flex-1 space-y-1"> <div class="flex items-center justify-between"> <h3 class="text-sm font-medium">Username</h3> <p class="text-sm text-gray-500">1h</p> </div> <div class="flex items-center justify-between"> <p class="text-sm text-gray-500">Deployed Workcation (2d89f0c8 in master) to production</p> <p class="text-sm bg-blue-500 p-1 rounded text-gray-50">whisper</p> </div> </div> </div> </li> </ul> </div> </section> <section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col overflow-hidden lg:order-last"> <div> <span class="pl-10 pt-2 relative z-0 inline-flex shadow-sm rounded-md"> <button type="button" class="relative inline-flex items-center px-3 py-1 rounded-l-md border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path> </svg> </button> <button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> YouTube </button> <button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50"> <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> </svg> </button> <button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path> </svg> </button> <button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-transparent dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path> </svg> </button> <div class="relative inline-block text-left"> <div> <button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-900 dark:border-gray-800 dark:hover:bg-gray-600 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500" aria-expanded="true" aria-controls="headlessui-menu-items-2"> Send Option <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 ml-2 h-5 w-5"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> </div> <div aria-labelledby="headlessui-menu-button-1" id="headlessui-menu-items-2" role="menu" tabindex="0" class="overflow-visible origin-top-right absolute bottom-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 focus:outline-none"> <div class="py-1" role="none"> Account settings Support License <form method="POST" action="#" role="none"> <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" id="headlessui-menu-item-44" role="menuitem" tabindex="-1"> Sign out </button> </form> </div> </div> </div> </span> <div class="pr-10 pl-10 pb-5 h-full mt-1 flex rounded-md shadow-sm"> <div class="relative flex items-stretch flex-grow focus-within:z-10"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path> </svg> </div> <input type="text" name="email" id="email" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="Type your message..."> </div> <button id="switchTheme" class="-ml-px bg-indigo-700 relative inline-flex items-center space-x-2 px-4 py-1 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-50"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> <span class="text-gray-50">Send</span> </button> </div> </div> </section>
The footer <section> tag has overflow-hidden set, which cuts off any elements that extend out of the border of the <section>. Since your menu should extend out the top of the <section>, this isn't what you want. Removing this utility appears to fix the issue. When debugging designs with lots of these Tailwind classes all over the place, it can be helpful to look at things in your browser DevTools to avoid being overwhelmed or missing things. z-index can be tricky to work with, especially since it's commonly misunderstood. A lot of the time, you shouldn't need to use z-index, so seeing if other strategies work could reduce complexity and make your sites more resilient. For more information on z-index, check out Josh W. Comeau's excellent blog post.
Why my button is below "Workflow" in my navbar?
I am working with tailwind and responsive design. Here is my code :
import React, { useState } from "react";
import { Transition } from "#headlessui/react";
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 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 className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
but the problem is when I reduce the width of the window I got that :
The problem is that I would like to have the button at the right.
How can I do that ?
I precise I want to keep the others menus like that :
How can I do that ?
Thank you very much !
full code
You can try move this code:
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 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 className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
To inside of before div
<div className="flex">
And add the next code div to before of first div mentioned (after move it):
<div className="m-auto md:hidden"></div>
Change the class of first div mentioned for this:
<div className="flex md:hidden">
And that is all. So the final code is this:
import React, { useState } from "react";
import { Transition } from "#headlessui/react";
function Nav() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
<nav className="bg-gray-800">
<div>
<div>
<div className="flex">
<div>
<img className="h-8 w-32" alt="Workflow" />
</div>
<div className="hidden md:block ml-auto">
<div className="space-x-4">
<a
href="#"
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Reports
</a>
</div>
</div>
<div className="m-auto md:hidden"></div>
<div className="-mr-2 flex md:hidden">
<button
onClick={() => setIsOpen(!isOpen)}
type="button"
className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 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 className="sr-only">Open main menu</span>
{!isOpen ? (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
) : (
<svg
className="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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
)}
</button>
</div>
</div>
</div>
</div>
<Transition
show={isOpen}
enter="transition ease-out duration-100 transform"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="transition ease-in duration-75 transform"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{(ref) => (
<div className="md:hidden" id="mobile-menu">
<div ref={ref} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a
href="#"
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium"
>
Dashboard
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Team
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Projects
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Calendar
</a>
<a
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Reports
</a>
</div>
</div>
)}
</Transition>
</nav>
</div>
);
}
export default Nav;
You can see the result here
please insert this line :) return ( <div> <nav className="bg-gray-800"> <div> <div className="flex flex-row justify-between"> <==== "this" <div className="flex"> <div> <img className="w-32 h-8" alt="Workflow" /> </div> also check more document in TailwindCSS, Happy coding!