JSFiddle - React, Tailwind, and code Playground

by timhuang

HTML

<div style="width: 700px">
<div class="mymenubar-wrap myc0">
  <ul class="mymenubarul">
    <li class="mylic0 selected"><a href="http://club.windlion.com">首頁 TOP</a></li>
	<li class="mylic38"><a href="http://club.windlion.com/archives/category/column">專欄 COLUMN</a></li>
	<li class="mylic27"><a href="http://club.windlion.com/archives/category/green">綠色 GREEN</a></li>
	<li class="mylic29"><a href="http://club.windlion.com/archives/category/intelligent">智能 INTELLIGENT</a></li>
	<li class="mylic33"><a href="http://club.windlion.com/archives/category/cultural-and-creative">文創 CULTURAL</a></li>
  </ul>
</div>
</div>

CSS

.mymenubar-wrap{
    width: 100%;
    clear: both;
    font-size: 12px;
    font-weight: bold;
    height: 30px;
}

.mymenubarul{
    line-height: 1;
}

.mymenubar-wrap li{
    float: left;
    position: relative;
    list-style: outside none none;   
}

.mymenubar-wrap a, .mymenubar-wrap a:link, .mymenubar-wrap a:visited {
    color: white;
}

.mymenubar-wrap a{
    display: block;
    border-style: none solid none none;
    border-width: 0 1px 0 0;
    padding: 0.75em 1em;
    text-decoration: none; 
}

.myc0 {
    background: #172F89;
}

.mymenubar-wrap li.selected.mylic0, .mymenubar-wrap li.mylic0 a:hover {
    background: #A6A0CB;
}

.myc38 {
    background: #A6A6A5;
}

.mymenubar-wrap li.selected.mylic38, .mymenubar-wrap li.mylic38 a:hover{
    background: #DCDADA;
}

.myc27 {
    background: #29AC39;
}

.mymenubar-wrap li.selected.mylic27, .mymenubar-wrap li.mylic27 a:hover{
    background: #C0DEAE;
}

.myc29 {
    background: #25ADB9;
}

.mymenubar-wrap li.selected.mylic29, .mymenubar-wrap li.mylic29 a:hover{
    background: #BFDFE3;
}

.myc33 {
    background: #B91937;
}

.mymenubar-wrap li.selected.mylic33, .mymenubar-wrap li.mylic33 a:hover{
    background: #E0AAA0;
}