JSFiddle - React, Tailwind, and code Playground
by ced1
HTML
<div class="menu-desktop-nav col-md-4 col-lg-3 col-xl-2 position-relative" style="overflow:hidden;">
<ul class="nav menu-nav-li rounded-menu position-relative" id="menu-nav">
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 top-active" data-id="anchor_1">
<a href="#" class=" nav-link">Traditional Pizza</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_2">
<a href="#" class=" nav-link">Burgers</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_3">
<a href="#" class=" nav-link">Steak</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_4">
<a href="#" class=" nav-link">Pasta</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_5">
<a href="#" class=" nav-link">Sides</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_6">
<a href="#" class=" nav-link">Dessert</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_7">
<a href="#" class=" nav-link">Drinks</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_8">
<a href="#" class=" nav-link">Alcohol</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 " data-id="anchor_9">
<a href="#" class=" nav-link">Deals</a>
</li>
<li class=" nav-item menu-nav-item text-uppercase font-weight-bold pt-4 pb-4 "...