JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<ul class="tabmenu "><li class="selected"><a href="http://www.reddit.com/r/bonerpartsdoesreddit/">hot</a></li><li><a href="http://www.reddit.com/r/bonerpartsdoesreddit/new/">new</a></li><li><a href="http://www.reddit.com/r/bonerpartsdoesreddit/controversial/">controversial</a></li><li><a href="http://www.reddit.com/r/bonerpartsdoesreddit/top/">top</a></li><li><a href="http://www.reddit.com/saved/">saved</a></li><li><a href="javascript:void(0);" id="viewImagesButton">view images(0)</a></li></ul>

CSS

ul.tabmenu{
  position:absolute;
  top:60px;
  right:22px;
}

ul.tabmenu li{
  float:left;
  padding:0px !important;
  margin:0px !important;
}
.tabmenu li a{
  display:block;
  padding:10px 15px;
  margin:0px 5px;
  border:none!important;
  border-bottom:#4884CD solid 3px !important;
  font-family:sans-serif;
  font-weight:bold;
  text-decoration:none;
  color:#444;
}

.tabmenu li a:hover{
  color:#fff;
}
.tabmenu li.selected a{
}
.tabmenu li:first-of-type a{
}
.tabmenu li:first-of-type.selected a{
}
.tabmenu li:last-of-type a{
}