JSFiddle - React, Tailwind, and code Playground

by kangismet

HTML

<nav id='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label><i class='material-icons'>&#59632;</i><span>MENU</span></label>
<ul>
<li><a href='/' itemprop='url' title='Blog Kang Ismet'><span itemprop='name'><img src='https://1.bp.blogspot.com/-fOoifeBp_DU/YEEBO0p4IsI/AAAAAAAAIlo/iv4QjgbaoTojr-xr2dbvmgvUy9hqmW1eQCLcBGAsYHQ/s75/kismt-small.png'/></span></a></li>
<li><a href='/p/about.html' itemprop='url' title='Tentang Kang Ismet'><span itemprop='name'>About</span></a></li>
<li><a href='/' itemprop='url' title='Hubungi'><span itemprop='name'>Contact</span></a></li>
<li><a class='sub' href='#'>Tool<svg class="icon name" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"></path></svg></a>
<ul class='menus'>
 <li><a href='/'>Code Parser</a></li>
 <li><a href='/'>Facebook ID Finder</a></li>
</ul>
</li>
<li><a class='daftarisi' href='/' itemprop='url' title='Daftar Isi'><span itemprop='name'>Daftar Isi</span></a></li>
    </ul>
    </nav>

CSS

#menu{background:#fff;height:42px;margin:0 auto;font-family:'Google Sans', sans-serif;text-transform:capitalize;font-size:14px}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:42px;width:auto}
.li-home{background:#f50;}
.li-home a{font-size:22px;}
#menu li{float:left;display:inline;position:relative;font-size:14px;color:#111;font-weight:600;text-transform:uppercase;}
#menu a{display:block;line-height:42px;padding:0 14px;text-decoration:none;color:#111}
#menu li a:hover {color:#fff;background-color:#FF4D3C;transition: all 0.3s ease-in;}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font-size:20px;display:none;width:35px;height:20px;line-height:20px;text-align:center;color:#111}
#menu label span{font-size:14px;position:absolute;left:35px;}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#FF4D3C;position:absolute;z-index:99;display:none;left:0;}
#menu ul.menus li{display:block;width:100%;font-size:13px;text-transform:none;text-shadow:none}
#menu ul.menus a{color:#fff;text-transform:uppercase}
#menu li:hover ul.menus{display:block}
#menu a.sub{padding:0 27px 0 14px}
#menu a.sub::after{content:&quot;&quot;;width:0;height:0;}
#menu ul.menus a:hover{background:#DF4E41;color:#fff}
#menu svg.name {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    vertical-align: middle;
}
.daftarisi {background:#d142a1;color: #fff;}
.daftarisi:hover {background:#717171;}


/* Fonts */@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2)...