JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<ul>
    <li class="title">Report Sections</li>
    <li class="parent active">Section 1<span class="glyphicon glyphicon-chevron-down pull-right"></span></li>
    <li class="area active">Area<span class="glyphicon glyphicon-chevron-down pull-right"></span></li>
    <li class="component active"><span class="glyphicon glyphicon-book icon-spacer"></span>Component</li>
    <li class="component active"><span class="glyphicon glyphicon-book icon-spacer"></span>Component</li>
    <li class="parent">Section 2<span class="glyphicon glyphicon-chevron-down pull-right"></span></li>
    <li class="area">Area<span class="glyphicon glyphicon-chevron-down pull-right"></span></li>
    <li class="component"><span class="glyphicon glyphicon-book icon-spacer"></span>Component</li>
    <li class="component"><span class="glyphicon glyphicon-book icon-spacer"></span>Component</li>
</ul>

CSS

body{
    margin:30px;
    font-weight:700;
    font-family:century gothic;
    color: #999999;
}
ul, li{
    padding:0;
    margin:0;
}
li{
    list-style:none;
    height:35px;
    width:250px;
    border-bottom:1px solid #DCD7D7;
    padding:8px;
    cursor:pointer;
}
.title{
    background-color:#2f2d2d;
    color:#ffffff;
}
.parent.active{
     background-color:#646464;
    color:#ffffff;
}
.parent:hover{
     background-color:#646464;
    color:#ffffff;
}
.area.active{
    background-color:#dcd9d9;
    color: #585555;
}
.area:hover{
    background-color:#dcd9d9;
    color: #585555;
}
.component.active{
    background-color:#efeded;
        color: #585555;
}
.component:hover{
    background-color:#efeded;
        color: #585555;
}
.component.active.selected{
    background-color: #483939;
    color: #E6E6E6;
}
.component.active:hover{
    background-color: #483939;
    color: #E6E6E6;
}
.icon-spacer{
    padding-right:8px;
}