JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<!--- Kode HTML Menu Horizontal Responsive Sederhana --->
<nav id='nav'>
<label class='top-menu' for='top-menu'><b>&#9776;</b> <span>Menu</span></label>
<input autocomplete='off' id='top-menu' role='button' type='checkbox'/>
<ul id='menus'>
<li><a href='http://www.komputerdia.com/'><i class="fa fa-home" aria-hidden="true"></i>&#160;<b>Home</b></a></li>
<li><a href='#'><i class="fa fa-wikipedia-w" aria-hidden="true"></i>&#160;<b>WikiPedia</b></a></li>
<li><a href='#'><i class="fa fa-wordpress" aria-hidden="true"></i>&#160;<b>WordPress</b></a></li>
<li><a href='#'><i class="fa fa-windows" aria-hidden="true"></i>&#160;<b>Windows</b></a></li>
</ul>
</nav>

CSS

<style type="text/css">
body{font-family:"Roboto",sans-serif!important;font-size:100%;margin:0px;padding:0px;}

/*navmenu-horizontal*/
#nav{background:#111111;}
#nav ul{margin:0;padding:0;}
#nav li{display:inline;display:inline-block;display:-moz-inline-stack;list-style:none;margin:0;padding:0;zoom:1;}
#nav li a{color:#ffffff;display:block;padding:1em;text-decoration:none;}
#nav li a:hover{background:#191919;color:#ffffff;}
#nav li:first-child{background:#e42a2a;}
.top-menu{background:#c91717;color:#fff;display:none;padding:10px 5px;text-align:left;text-decoration:none;}
.top-menu span{float:right;margin-right:1em;}
.top-menu b{font-size:30px;}
#nav input[type=checkbox]:checked ~ #menus{display:block;}
#nav input[type=checkbox]{display:none;}

/*css-styles-responsive*/
@media screen and (max-width:768px){ 
 #nav ul{display:none;position:static;}
 #nav li{border-bottom:1px solid #333;}
 #nav ul li, #nav li a{width:100%;}
 #nav li a{display:block;height:auto;line-height:normal;}
 #nav li a{text-align:left;}
 .top-menu{display:block!important;line-height:30px;}
 .top-menu:hover{cursor:pointer;}
 label{margin:0!important;}
}
</style>