JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<ul>
  <li class="uk-parent" aria-expanded="false" aria-haspopup="true" data-uk-dropdown="{'preventflip':'y'}"><a href="/Censored"><i class="uk-icon-angle-down"></i>Menu Name</a><div tabindex="-32768" class="uk-dropdown uk-dropdown-navbar uk-dropdown-width-1 uk-dropdown-center uk-dropdown-bottom" aria-hidden="true" style="left: -34px; top: 24px;"><div class="uk-grid uk-dropdown-grid"><div class="uk-width-1-1"><ul class="uk-nav uk-nav-navbar"><li><a href="/Censored">Censored</a></li><li><a href="/Censored">Censored</a></li><li><a href="/censored">Censored</a></li><li><a href="/censored">Censored</a></li><li><a href="/censored">Censored</a></li><li><a href="/censored">Censored</a></li></ul></div></div></div></li>
</ul>

CSS

.uk-icon-angle-down {
  float: right;
  margin-top: 6px;
  padding-left: 5px
}
.uk-navbar-nav>li>a {
  display: block;
  box-sizing: border-box;
  text-decoration: none;
  height: auto;
  padding: 0
10px;
  color: #fff!important;
  font-size: 14px;
  font-family: 'Open Sans',Helvetica,Arial,sans-serif;
  font-weight: 700;
  position: relative;
  letter-spacing: 0px;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out
}