JSFiddle - React, Tailwind, and code Playground

by BlogPedas

HTML

<div class='daerah-menu'>
<ul>
<li><a href='http://blogpedas.blogspot.com/'><img alt='L3' height='15px' src='http://4.bp.blogspot.com/-V0u95Qik8R4/Ul-e3BFdSPI/AAAAAAAABww/uBaIbTGhTKk/s1600/Beranda.png' width='20px'/></a></li>
  <li><a href='#'>UMUM</a></li>
  <li><a href='#'>SEJARAH</a></li>
  <li><a href='#'>MISTERI</a></li>
  <li><a href='#'>UNIK</a></li>
  <li><a href='#'>LELUCON</a></li>
  <li><a href='#'>HIBURAN</a></li>
  <li><a href='#'>OLAH RAGA</a></li>
  <li><a href='#'>GAYA HIDUP</a></li>
  <li><a href='#'>TIPS</a></li>
  <li><a href='#'>WISATA</a></li>
</ul>
</div>

CSS

/* Menu Navigasi Yang Warna Warni */
.daerah-menu {height: 20px;overflow: hidden;width: 100%;
text-align: center; font-family: Helvetica Neue, Arial, Helvetica, sans-serif; border-bottom: 3px solid #B40404; background: #151515; margin:0px; padding:8px 0;clear:both;}
.daerah-menu ul{padding:4px; margin:-2px 0; line-height:1.2;}
.daerah-menu ul li{padding:4px; margin:0 -1px 0 -2px; display:inline;}
.daerah-menu li a{padding:15px 5px 15px 5px; color: #fff;margin:0 -5px 0 -5px;text-decoration:none;}
.daerah-menu li a:hover{color: #fff;background-color: #B40404;}
.daerah-menu a:link, .daerah-menu a:hover, .daerah-menu a:visited {text-decoration:none;}

.daerah-menu ul li:nth-child(1) {background-color: none; padding:15px 5px 10px 5px;}
.daerah-menu ul li:nth-child(2) {background-color :red; padding:15px 5px 10px 5px;}
.daerah-menu ul li:nth-child(3) {background-color: #2E9AFE; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(4) {background-color: #5FB404; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(5) {background-color: #9A2EFE; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(6) {background-color: #D7DF01; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(7) {background-color: #084B8A; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(8) {background-color: #FE2E9A; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(9) {background-color: #088A4B; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(10) {background-color: #FF8000; padding:15px 5px 10px 5px;;}
.daerah-menu ul li:nth-child(11) {background-color: #9A2EFE; padding:15px 5px 10px 5px;;}

@media screen and (max-width:700px){
    .daerah-menu ul li{display:block;}
    .daerah-menu ul{padding:0px; margin:0 0 -10px;}
    .daerah-menu li a:hover{color: black;background:none;}
    .daerah-menu {height: auto;}
.daerah-menu ul li:nth-child(1),.daerah-menu ul li:nth-child(2),.daerah-menu ul li:nth-child(3),.daerah-menu ul li:nth-child(4),.daerah-menu ul...