Hover panel of grouped links
Create a navigation bar with Tailwind CSS that includes a "Products" item revealing a mega-menu dropdown on hover/focus. The dropdown is a wide rounded panel with two columns of link items, each item having a small icon square, a title, and a subtitle. Use group-hover to toggle visibility with a soft transition.
.
Create a navigation bar with Tailwind CSS that includes a "Products" item revealing a mega-menu dropdown on hover/focus. The dropdown is a wide rounded panel with two columns of link items, each item having a small icon square, a title, and a subtitle. Use group-hover to toggle visibility with a soft transition.<header class="border-b border-neutral-200 bg-white">
<nav class="mx-auto flex max-w-6xl items-center gap-8 px-6 py-4">
<a href="#" class="font-semibold text-neutral-900">Vertex</a>
<div class="group relative">
<button class="flex items-center gap-1 text-sm text-neutral-600 hover:text-neutral-900">Products <span class="text-xs"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m7 10 5 5 5-5"/></svg></span></button>
<div class="invisible absolute left-0 top-full z-40 mt-2 w-[28rem] rounded-2xl border border-neutral-200 bg-white p-3 opacity-0 shadow-xl transition group-hover:visible group-hover:opacity-100">
<div class="grid grid-cols-2 gap-1">
<a href="#" class="flex gap-3 rounded-xl p-3 hover:bg-neutral-50">
<span class="h-8 w-8 rounded-lg bg-neutral-900"></span>
<span><span class="block text-sm font-medium text-neutral-900">Analytics</span><span class="block text-xs text-neutral-500">Measure everything</span></span>
</a>
<a href="#" class="flex gap-3 rounded-xl p-3 hover:bg-neutral-50">
<span class="h-8 w-8 rounded-lg bg-neutral-900"></span>
<span><span class="block text-sm font-medium text-neutral-900">Automation</span><span class="block text-xs text-neutral-500">Skip the busywork</span></span>
</a>
</div>
</div>
</div>
<a href="#" class="text-sm text-neutral-600 hover:text-neutral-900">Pricing</a>
</nav>
</header>Create a navigation bar with Tailwind CSS that includes a "Products" item revealing a mega-menu dropdown on hover/focus. The dropdown is a wide rounded panel with two columns of link items, each item having a small icon square, a title, and a subtitle. Use group-hover to toggle visibility with a soft transition.