JSFiddle - React, Tailwind, and code Playground

by BlogPedas

HTML

<div class='menu' id='daftar-menu'>
<ul>
<li><a href='#'>Home</a></li>
  <li><a href='#'>Berita</a></li>
  <li><a href='#'>Panduan Blog</a></li>
  <li><a href='#'>Gaya Hidup</a></li>
  <li><a href='#'>Arsip</a></li>
</ul>
</div>

CSS

.menu { height: auto; width: 100%; overflow: hidden; text-align: justify; font: 13px Arial,Tahoma,Helvetica,FreeSans,sans-serif; border-bottom: 1px solid #cccccc; background: rgb(235,235,235); background: -moz-linear-gradient(center top , rgb(244, 244, 244) 0%, rgb(222, 222, 222) 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgb(244, 244, 244)), to(rgb(222, 222, 222))); background: -o-linear-gradient(top, rgb(244, 244, 244), rgb(222, 222, 222)); background: -ms-linear-gradient(top, rgb(244, 244, 244), rgb(222, 222, 222)); margin:0px auto; } 
#daftar-menu { -moz-background-inline-policy:continuous; float:left; margin:0; padding: 6px; } 
#daftar-menu a:link, #daftar-menu a:visit { font-weight:bold; text-shadow: 1px 1px rgb(255, 255, 255); }
#daftar-menu a:hover { text-decoration:none; font-weight:bold; }
#daftar-menu ul{ padding:4px; margin:0px; line-height:1.2 !important; }
#daftar-menu ul li{ padding:0px; margin:0px; list-style: none; display:inline; }
#daftar-menu li a{ text-decoration:none; padding:5px; font-weight:bold; color: #084B8A; }
#daftar-menu li a:hover{ font-weight:bold; color: #424242;}