JSFiddle - React, Tailwind, and code Playground

HTML

<div class='menu-mj-elegant'><ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>

<li data-role='dropdown'><a href='#'>Master Jin</a><ul>
<li><a href='#'>Lain-kali</a></li>
<li><a href='#'>Lain-lain</a></li>
</ul></li>
<li><a href='#'>Paling</a></li>
<li><a href='#'>Jos</a></li>
</ul>

<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='search' method='get'>
<input name='q' placeholder='Search Somethings..' size='40' type='text'/></form>
</div>

CSS

ul.dark_menu {
  list-style:none;
  padding:5px 1px;
  font-weight:200;
  font-size:13px;
  letter-spacing:0.01em;
  color:#fff;
  line-height:15px;
  margin-left:85px;
  width:300px;
  position:relative;
  background:#bbb;
  border-radius:5px;
  border:4px solid #AD3000;
}

ul.dark_menu:after {
  content:"";
  clear:both;
  display:block;
  overflow:hidden;
  visibility:hidden;
  width:0;
  height:0;
}

ul.dark_menu li {
  float:left;
  position:relative;
  border-right:1px dashed #ddd;
}

ul.dark_menu li a,
ul.dark_menu li a:link {
  color:#fafafa;
  text-decoration:none;
  display:block;
  padding:8px 10px;
  transition:all 0.2s ease;
}

ul.dark_menu li a:hover {
  color:#fff;
  transition:all 0.5s ease;
}

ul.dark_menu li a.selected {
  border-radius:15px/45px;
}

ul.dark_menu li a.selected,
ul.dark_menu li a:active {
  color:#fff;
  transition:all 0.5s ease;
}

ul.dark_menu li ul {
  display:none;
}

ul.dark_menu li ul:before {
  content:" ";
  position:absolute;
  display:block;
  z-index:1500;
  left:0;
  top:-10px;
  height:10px;
  width:100%;
}

ul.dark_menu li ul {
  transition:all 0.5s ease;
  top:55px;
}

ul.dark_menu li:hover ul {
  position:absolute;
  display:block;
  z-index:1000;
  box-shadow:inset 0 4px 3px rgba(0,0,0,0.3),0 1px 0 #ddd,0 5px 10px rgba(0,0,0,0.2);
  left:0;
  border-radius:0 0 5px 5px;
  top:36px;
  padding:5px 0;
  list-style:none;
  background:#fff;
}

ul.dark_menu li ul li {
  float:none;
  margin:0;
}

ul.dark_menu li ul li:first-child {
  margin:0;
  border-top:0 none;
}

ul.dark_menu li ul li:last-child {
  border-bottom:0 none;
}

ul.dark_menu li ul li a,
ul.dark_menu li ul li a:link {
  color:#222;
  display:block;
  background:transparent none;
  padding:10px 25px 10px 25px;
  white-space:nowrap;
}

ul.dark_menu li ul li a:hover {
  background:#bbb;
  -moz-transition:all 0.1s ease-in-out;
  color:#fff;
  -webkit-transition:all 0.1s ease-in-out;
}

.menu-mj-elegant {
  position:absolute;
  z-index:99;
  width:520px;
 ...