Hover tailwindcss

menus.html

<!--
  Inverse Focus Navigation Menu
  Created by Surjith S M 
  https://twitter.com/surjithctly

  Buy Handbook: https://dub.sh/handbook 
-->

<div class="relative flex min-h-screen flex-col overflow-hidden bg-gray-50">
  <img src="/img/beams.jpg" alt="" class="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2" width="1308" />
  <div class="absolute inset-0 bg-[url(/img/grid.svg)] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))]"></div>

  <header class="relative bg-white py-4 shadow-xl shadow-black/5 flex items-center flex-col">
    <nav class="flex gap-5 [&:not(:hover)>a]:opacity-100 [&>a]:transition-opacity">
      <a href="#" class="[&:not(:hover)]:opacity-50">Features</a>
      <a href="#" class="[&:not(:hover)]:opacity-50">Solutions</a>
      <a href="#" class="[&:not(:hover)]:opacity-50">Pricing</a>
      <a href="#" class="[&:not(:hover)]:opacity-50">Blog</a>
      <a href="#" class="[&:not(:hover)]:opacity-50">Contact</a>
    </nav>
  </header>
</div>