I want to keep buttons from different parent divs active at the same time, just like:
On my project, I can't select Limit and Cross 3x at the same time, for example. When one button gets focused, the other from another parent div does not remain active.
Is there a way to do that? I'm using TailwindCSS and AlpineJS on this project.
Here's my code:
<div class="px-16 py-6 mt-2 bg-white shadow-sm">
<div>
<div class="sm:hidden">
<select aria-label="Selected tab" class="block w-full form-select">
<option selected>Spot</option>
<option>Cross 3x</option>
<option>Isolada 10x</option>
</select>
</div>
<div class="hidden sm:block md:flex md:flex-row md:justify-between">
<nav class="flex">
<button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50" autofocus aria-current="page">
Spot
</button>
<button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50">
Cross 3x
</button>
<button type="button" class="px-4 py-1 text-sm font-medium leading-5 text-gray-500 active:text-indigo-700 focus:no-underline hover:no-underline hover:text-gray-700 focus:outline-none focus:text-indigo-600 focus:bg-indigo-100 bg-indigo-50">
Isolada 10x
</button>
</nav>
<!-- Dots Vertical -->
<div class="hidden md:flex" id="nav-heading" aria-labelledby="nav-heading" x-data="{ dotsOpen: false }" :aria-expanded="dotsOpen">
<button type="button" :aria-expanded="dotsOpen" aria-controls="nav-list" #mouseenter="dotsOpen = !dotsOpen" #click.away="dotsOpen = false">
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
</svg>
</button>
<div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="dotsOpen" id="nav-list" class="absolute z-10 w-auto mt-8 -ml-8 origin-right rounded-md shadow-lg">
<!--
Dots dropdown panel, show/hide based on dropdown state.
-->
<div #mouseleave="dotsOpen = !dotsOpen" class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<button type="button" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<p class="flex justify-start font-medium">Regras de Trading</p>
</button>
<a href="#" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<p class="flex justify-start font-medium">FAQ</p>
</a>
<button type="button" class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<p class="flex justify-start font-medium">Spot Tutorial</p>
</button>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="sm:hidden">
<select aria-label="Selected tab" class="block w-full py-2 pl-3 pr-10 mt-2 text-base leading-6 transition duration-150 ease-in-out border-gray-300 form-select focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
<option selected>Limit</option>
<option>Make Order</option>
<option>Stop-limit</option>
</select>
</div>
<div class="hidden sm:block">
<div class="border-b border-gray-200">
<nav class="flex mt-1 -mb-px">
<button type="button" class="px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500" autofocus aria-current="page">
Limit
</button>
<button type="button" class="px-1 py-2 ml-8 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500">
Make Order
</button>
<div class="flex flex-row items-center justify-center ml-8" id="nav-heading" aria-labelledby="nav-heading" x-data="{ stopLimitOpen: false }" :aria-expanded="stopLimitOpen">
<svg class="pb-0.5 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<button type="button" class="px-1 py-2 text-sm font-medium leading-5 text-gray-500 whitespace-no-wrap border-b-2 border-transparent hover:no-underline focus:no-underline hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-indigo-500 focus:border-indigo-500 active:text-indigo-500">
Stop-limit
</button>
<button class="pb-0.5 focus:outline-none" type="button" :aria-expanded="stopLimitOpen" aria-controls="nav-list" #mouseenter="stopLimitOpen = !stopLimitOpen" #click.away="stopLimitOpen = false">
<svg class="w-3 h-3 ml-1 cursor-pointer" fill="currentColor" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show.transition.in.duration.100ms.origin.top.left.opacity.scale.10.out.duration.100ms.origin.bottom.right.opacity.scale.10="stopLimitOpen" id="nav-list" class="absolute z-10 w-auto origin-center rounded-md shadow-lg mt-28">
<!--
Stop Limit dropdown panel, show/hide based on dropdown state.
-->
<div #mouseleave="stopLimitOpen = !stopLimitOpen" class="py-1 bg-white rounded-md shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<p class="flex justify-start font-medium">Stop-Limit</p>
</button>
<button type="button" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:no-underline focus:no-underline focus:outline-none focus:bg-gray-100 focus:text-gray-900" role="menuitem">
<p class="flex justify-start font-medium">OCO</p>
</button>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!-- Buy/Sell Bitcoin Table -->
<div class="grid grid-cols-2 gap-16 mt-4">
<div class="col-span-1">
<div class="flex flex-row items-center justify-between">
<h4>Comprar BTC</h4>
<div class="flex flex-row items-center justify-center">
<svg aria-label="Lista" data-balloon-pos="up" id="show-tip" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
<p class="text-gray-600">- USDT</p>
</div>
</div>
</div>
<div class="col-span-1">
<div class="flex flex-row items-center justify-between">
<h4>Vender BTC</h4>
<div class="flex flex-row items-center justify-center">
<svg aria-label="Lista" data-balloon-pos="up" id="show-tip" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
</svg>
<p class="text-gray-600">- USDT</p>
</div>
</div>
</div>
</div>
</div>
Related
I recently changed to importing the layout page of a project globally rather than doing so on each page that uses the layout. I understand that this change makes the layout component a parent of the pages using it (importing the layout component in each page makes it a child of the page), but I have now come to know that this also affects the CSS cascading and specificity rules.
I did some fiddling and managed to get things back to how it was but I'm still unable to fix the CSS of my nav section.
These are screenshots of what I have now:
I copied over the rendered HTML of the page to Tailwind Play and it generates the page as I expect, meaning what I have should work. This is the screenshot for that:
This is the rendered HTML code for this page:
<div class="min-h-screen dark:text-white bg-gray-100 dark:bg-gray-700 border-b border-gray-200"><nav><!-- Primary Navigation Menu --><div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><div class="flex justify-between"><!-- Logo --><div class="pt-2"><img src="/img/Android-icon.png" alt="SmartWealth Logo" class="block h-9 w-auto"></div><!-- Navigation Links --><div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"><a class="inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-indigo-800 text-sm font-medium leading-5 text-gray-700 dark:text-white focus:outline-none focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a><a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div><!-- Dropdown Navigation Menu --><div class="hidden sm:flex sm:items-center sm:ml-6"><!-- Settings Dropdown --><div class="ml-3"><div class="relative"><div><button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"><img class="h-8 w-8 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></button></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Account Management --><div class="px-4 py-2 text-xs text-gray-400"> Manage Account </div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form><div><button type="submit" class="block w-full px-4 py-2 text-sm leading-5 text-gray-700 text-left dark:hover:bg-gray-500 hover:bg-gray-200 focus:outline-none dark:focus:bg-gray-500 focus:bg-gray-200 transition"> Log Out </button></div></form></div></div></div></div><!--Notifications Dropdown --><div class="mx-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white"></div></div></div></div></div><!-- Page Theme Toggle --><div class="ml-2 flex items-right"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div></div><!-- Hamburger --><div class="-mr-2 flex items-center sm:hidden"><button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition"><svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"><path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path><path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div><!-- Responsive Navigation Menu --><div class="hidden sm:hidden"><div class="pt-2 pb-3 space-y-1"><div><a class="block pl-3 pr-4 py-2 border-l-4 border-indigo-400 dark:border-indigo-800 text-base font-medium dark:font-bold text-indigo-700 dark:text-indigo-800 bg-indigo-50 dark:bg-gray-800 focus:outline-none focus:text-indigo-800 dark:focus:text-indigo-800 focus:bg-indigo-800 dark:focus:bg-gray-800 focus:border-indigo-700 dark:focus:border-indigo-200 transition" href="http://127.0.0.1:8000/dashboard"> Dashboard </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/users"> Users </a></div></div><!-- Responsive Settings Options --><div class="pt-4 pb-1 border-t border-gray-200"><div class="flex items-center px-4"><div class="flex-shrink-0 mr-3"><img class="h-10 w-10 rounded-full object-cover" src="https://smartwealth.s3.us-west-004.backblazeb2.com/profile-photos/x6ykUSsxOgm220vMTZbvaIIGe5Nu3wEsg9c0g469.jpg" alt="Adefowowe Adebamowo"></div><div class="ml-2"><div class="relative"><div><div><span class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"></path></svg></span></div></div><!-- Full Screen Dropdown Overlay --><div class="fixed inset-0 z-40" style="display: none;"></div><div class="absolute z-50 mt-2 rounded-md shadow-lg w-48 origin-top-left left-0" style="display: none;"><div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white"><!-- Notifications Management --><div class="block px-4 py-2 bg-white text-xs text-gray-400"> Your Notifications </div><div class="block px-4 py-2 bg-white text-xs text-gray-400"><button class="mx-2">x</button><button>Mark all as read</button></div><div class="bg-white dark:bg-gray-800"></div></div></div></div></div><div class="ml-2"><button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4"><path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"></path></svg></button></div></div><div class="mt-3 space-y-1"><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/manage/rbac"> Manage Roles and Permissons </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/profile"> Account Profile </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"> Risk Assessment </a></div><!--v-if--><!--v-if--><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/providers/authorisation"> Provider Authorisation </a></div><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/chat/messages"> Chats </a></div><!--v-if--><div><a class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/user/api-tokens"> API Tokens </a></div><!-- Authentication --><form method="POST"><div><button class="block pl-3 pr-4 py-2 border-l-4 border-transparent dark:border-transparent text-base font-medium text-gray-600 dark:text-gray-300 dark:hover:text-gray-300 hover:text-gray-800 dark:hover:bg-gray-25 hover:bg-gray-50 hover:border-gray-300 dark:hover:border-gray-200 focus:outline-none focus:text-gray-800 dark:focus:text-gray-200 focus:bg-gray-50 dark:focus:bg-gray-25 focus:border-gray-300 dark:focus:border-gray-100 transition w-full text-left"> Log Out </button></div></form></div></div></div></div></nav><!-- Display messages from backend sent as flash page props --><div><!--v-if--></div><!-- Display notifications broadcasts (wrap into a reusable component) --><!--v-if--><!-- Page Heading --><!--v-if--><!-- Page Content --><main><!----><div slot="header" class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"><h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight"> Dashboard </h2></div><div class="py-8"><div class="max-w-3xl mx-auto sm:px-6 lg:px-8"><div class="rounded"><div class="p-6 sm:px-20 border border-gray-200 rounded"><div class="text-2xl"> Hello Adefowowe, welcome to SmartWealth! </div><div class="mt-1 text-sm"><p> Now that you're here, the first step is to take a risk assessment test to gauge your investment capacity and risk disposition. You can do that here: <a class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-transparent text-sm font-medium leading-5 text-gray-500 dark:text-white dark:hover:text-gray-300 hover:text-gray-800 dark:hover:border-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-700 dark:focus:text-gray-200 focus:border-gray-300 dark:focus:border-gray-100 transition" href="http://127.0.0.1:8000/investment-profile/create"><strong> Risk Assessment </strong></a></p></div></div></div></div></div></main></div>
What can I do to get things working properly?
you have to append #media screen sizes in your CSS file as:
/* Small */
#media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Medium */
#media (min-width: 992px) {
.container {
width: 970px;
}
}
/* Large */
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<div class="head">
<div class="container">
<p>some text</p>
</div>
</div>
I am working on a react project using vite and for css I am using tailwind css. From the component section of tailwind css website I have copied template, and I am unable to get responsive functionality and show/hide menu on click
below is my header code
<nav class="bg-gray-800">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<button type="button" class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<img class="block h-8 w-auto lg:hidden" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" />
<img class="hidden h-8 w-auto lg:block" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company"/>
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
Dashboard
Team
Projects
Calendar
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<div class="relative ml-3">
<div>
<button type="button" class="flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""/>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
Your Profile
Settings
Sign out
</div>
</div>
</div>
</div>
</div>
<div class="sm:hidden" id="mobile-menu">
<div class="space-y-1 px-2 pt-2 pb-3">
Dashboard
Team
Projects
Calendar
</div>
</div>
</nav>
everything is working fine but by running the above code I am getting only ui and not getting click function on menu bars or other
see the image below
[
let menuMovilButton = document.getElementById('menu-movil-button');
let userMenuButton = document.getElementById('user-menu-button');
let userMenu = document.getElementById('user-menu');
let menuMovil = document.getElementById('menu-movil');
menuMovilButton.addEventListener('click', () =>{
menuMovil.classList.toggle('hidden');
});
userMenuButton.addEventListener('click', () =>{
userMenu.classList.toggle('hidden');
});`
can anyone fix that for me really I spend a lot of time trying different solutions never works.
I use a tailwindcss template for the modal and javascript to show it or hide it.
I don't find the solution can anyone fix it, My modal just works fine for the first row of the table and did not work for the rest of rows
<!-- component -->
<div class="overflow-x-auto">
<div class="min-w-screen min-h-screen flex items-start justify-center font-sans overflow-hidden">
<div class="w-full lg:w-5/6">
<div class="bg-white shadow-md rounded my-6">
<table class="min-w-max w-full table-auto">
<thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Event Title</th>
<th class="py-3 px-6 text-left">Description</th>
<th class="py-3 px-6 text-center">Date</th>
<th class="py-3 px-6 text-center">Image</th>
<th class="py-3 px-6 text-center">Status</th>
<th class="py-3 px-6 text-center">Actions</th>
</tr>
</thead>
<tbody class="text-gray-600 text-sm font-light">
#foreach ($events as $event)
<tr class="border-b border-gray-200 hover:bg-gray-100">
<td class="py-3 px-6 text-left whitespace-nowrap">
<div class="flex items-center">
<span class="font-medium">{{ $event->title }}</span>
</div>
</td>
<td class="py-3 px-6 text-left">
<div class="flex items-center">
<span>{{ $event->description }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<span class="font-medium">{{ $event->date }}</span>
</div>
</td>
<td class="py-3 px-6 text-center">
<div class="flex items-center justify-center">
<img class="w-6 h-6 rounded-full border-gray-200 border -m-1 transform hover:scale-125" src="{{ Storage::url($event->image) }}" alt="{{ $event->place }}"/>
</div>
</td>
<td class="py-3 px-6 text-center">
#if(($event->status)==1)
<span class="bg-purple-200 text-purple-600 py-1 px-3 rounded-full text-xs">Active</span>
#else
<span class="bg-red-200 text-red-600 py-1 px-3 rounded-full text-xs">Pending</span>
#endif
<!--<span class="bg-green-200 text-green-600 py-1 px-3 rounded-full text-xs">Completed</span>-->
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<div class="w-4 mr-4 transform hover:text-red-700 hover:scale-110">
<a href="{{ route('events.edit',$event->id) }}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
</div>
<!--------My delete buttton------------------>
<div class="w-4 mr-2 transform hover:text-red-700 hover:scale-110">
<a class="delete-btn" >
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</a>
</div>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
{!! $events->links() !!}
</div>
</div>
</div>
</div>
<!-- delet event confiming model-->
<div class="relative z-10 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true" id="overlay">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" ></div>
<div class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<!-- Heroicon name: outline/exclamation-triangle -->
<svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z" />
</svg>
</div>
<form action="{{ route('events.destroy',$event->id) }}" method="POST">
#csrf
#method('DELETE')
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Delete an Event</h3>
<div class="mt-2">
<p class="text-sm text-gray-500">Are you sure you want to delete the event? All of the event data will be permanently removed. This action cannot be undone.</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button type="submit" class="inline-flex w-full justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm">Delete</button>
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" id="close-modal">Cancel</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- delet event confiming model script-->
<script>
window.addEventListener('DOMContentLoaded', () =>{
const overlay = document.querySelector('#overlay')
const delBtn = document.querySelector('.delete-btn')
const closeBtn = document.querySelector('#close-modal')
const toggleModal = () => {
overlay.classList.toggle('hidden')
overlay.classList.toggle('flex')
}
delBtn.addEventListener('click', toggleModal)
closeBtn.addEventListener('click', toggleModal)
})
</script>
Taken directly from the MDN documentation:
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So regardless of the number of elements you have in your document with a class of delete-btn, using document.querySelector('.delete-btn') will only ever return the first element it finds.
As you want to be able to apply an event listener to all elements with the delete-btn class, what you really want is the querySelectorAll() method.
The Document method querySelectorAll() returns a static (not live)
NodeList representing a list of the document's elements that match the
specified group of selectors.
The NodeList returned from calling document.querySelectorAll('.delete-btn'); is a collection (similar concept to an array) which contains all the elements located with the specified selector. As this is a collection and not a single element, you need to iterate over each of the collection elements and attach an eventListener to each iteration.
So applying the above to your use case, you might do:
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.delete-btn').forEach((btn) => {
btn.addEventListener('click', function(evt) {
toggleModal();
})
})
});
An example CodePend for reference.
I'm building a dashboard with flowbite and tailwind in laravel, but I'm really struggling with pop ups.
I'm using the flowbite pop-up modal model, but when i copy and paste the code into my project and try to toggle the pop up it's only showing a black screen.
The dropdown, tooltips etc are working correctly as almost every other component.
I've also tried to take another modal model from flowbite but others are not showing at all, so i assume that there must be something wrong in my configurations.
This is the modal I'm trying to use :
<button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="popup-modal">
Toggle modal
</button>
<div id="popup-modal" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="popup-modal">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>
</button>
<div class="p-6 text-center">
<svg class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
<button data-modal-toggle="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
Yes, I'm sure
</button>
<button data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No, cancel</button>
</div>
</div>
</div>
</div>
Here's my my webpack.mix :
const mix = require('laravel-mix');
require('laravel-mix-tailwind');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('tailwindcss'),
])
if (mix.inProduction()) {
mix
.version();
}
And here's my tailwind config.js ;
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
'./resources/js/**/*.vue',
"/node_modules/flowbite/**/*.js",
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('#tailwindcss/ui'),
require('#tailwindcss/custom-forms'),
require('flowbite/plugin')
]
}
Also, I've installed tailwind via npm and I'm importing in my app.js the flowbite js files like so :
require('../../node_modules/flowbite/dist/flowbite.js');
Everything is correctly working, but this pop ups are making me crazy. Is there somebody who has an idea of what is wrong with them?
Thank you
Make sure that you also have aria-hidden="true" applied as an attribute when the modal is hidden by default so that Flowbite can check whether the modal is being shown or not.
<button class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button" data-modal-toggle="popup-modal">
Toggle modal
</button>
<div id="popup-modal" aria-hidden="true" tabindex="-1" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 md:inset-0 h-modal md:h-full">
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="popup-modal">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path 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"></path></svg>
</button>
<div class="p-6 text-center">
<svg class="mx-auto mb-4 w-14 h-14 text-gray-400 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">Are you sure you want to delete this product?</h3>
<button data-modal-toggle="popup-modal" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
Yes, I'm sure
</button>
<button data-modal-toggle="popup-modal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">No, cancel</button>
</div>
</div>
</div>
</div>
I'm trying to create a Mega Menu that triggers on Hover, using Tailwind CSS and Alpinejs. I kind of having it working, but it's really buggy.
I've tried adding x-on:mouseleave to different elements but it will either flicker constantly or only disappear when moving away from certain areas. So it will either disappear when moving below the menu and not when moving above and vice versa.
Any insight would be much appreciated!
https://codepen.io/kennyk3/pen/yLJmzYJ
<div class="bg-blue-800 hidden md:block">
<div class="max-w-screen-xl mx-auto">
<nav class="flex items-center justify-between flex-wrap">
<div class="w-full block flex-grow md:flex md:items-center md:w-auto">
<div class="font-bold md:flex-grow">
<ul class="flex justify-between">
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li class="group hover:bg-white">
<div x-data="{ resourcesMenu: false }" x-on:mouseover="resourcesMenu = !resourcesMenu" x-on:mouseleave="resourcesMenu = !resourcesMenu">
MEGA MENU
<div x-show="resourcesMenu" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1" class="absolute inset-x-0 transform shadow-lg -mt-1 z-10">
<div class="bg-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Analytics
</p>
<p class="mt-1 text-sm text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Engagement
</p>
<p class="mt-1 text-sm text-gray-500">
Speak directly to your customers in a more meaningful way.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Security
</p>
<p class="mt-1 text-sm text-gray-500">
Your customers' data will be safe and secure.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Integrations
</p>
<p class="mt-1 text-sm text-gray-500">
Connect with third-party tools that you're already using.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
<li class="md:hidden">
LINK
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Change your trigger event from mouseover to mouseenter. The problem you're having is mouseover is triggered for the parent and its child elements.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
Wheres mouseenter will be triggered once.