JSFiddle - React, Tailwind, and code Playground

by Parth Jasani

HTML

<div id="sorting" class="panel-collapse collapse in">
Sort By
                         <div class="item-list"> <ul><li class="first"><a href="#"class="active">Relevancy</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Type</a></li>
<li><a href="#">Author</a></li>
<li><a href="#">Date</a></li>
<li class="last"><a href="#">Group</a></li>
</ul></div>	
                        </div>

CSS

#sorting ul li{
      display: inline;
      padding:0 10px;
}
#sorting ul li a{
color:#000000;	
text-decoration:none;
position:relative;
}
#sorting ul li a.active:after{
    color: #17A2F3;
    border-bottom: 2px solid red;
    font-weight: bold;
    content: "";
    position: absolute;
    bottom: -4px;
    left: -6px;
    width: 100%;
}
#sorting p{
	font-weight:bold;
}
.sortHeader{
	position: relative;
    float: right;
    z-index: 90;
}
.search-results-wrapper div#tabs{
	padding-top:20px;
}
#sorting .item-list,#sorting .item-list ul,#sorting p{
	display:inline;
}