JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mobile-menu">
<div class="sub-menu">
    <ul class="menu nav navbar-nav" id="">
        <li class="active"><a href="/bn" class="first leaf home active">Home</a></li>
        <li><a href="/bn/tonic-doctor" class="leaf doctor">Doctor</a></li>
        <li><a href="/bn/tonic-benefits" class="leaf benefits">Benefits</a></li>
        <li><a href="/bn/packages" class="leaf packages">Packages</a></li>
        <li><a href="/bn/health-topics" style="swiper-slide" class="last leaf স্বাস্থ্য-প্রসঙ্গ">স্বাস্থ্য প্রসঙ্গ</a></li>
    </ul>    
</div>
</div>

CSS

.mobile-menu {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.sub-menu {
  height: 100%;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
.menu.navbar-nav li {
 width: 22%;
 text-align: center;
 display: inline-block;
 vertical-align: top;
}