JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="selectable">
    <li>Title</li>
    <li class="active">Title</li>
    <li>Title</li>
    <li>Title</li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

CSS

html {
    min-height: 100%;
    background-repeat: norepeat;
    background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #E3EF92 40%, #97B1EF 60%);
    background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #E3EF92 40%, #97B1EF 60%);
    background-image: -o-linear-gradient(top left, #FFFFFF 0%, #E3EF92 40%, #97B1EF 60%);
    background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(0.4, #E3EF92), color-stop(.6, #97B1EF));
    background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #E3EF92 40%, #97B1EF 60%);
    background-image: linear-gradient(to bottom right, #FFFFFF 0%, #E3EF92 40%, #97B1EF 60%);
}

ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 1em 1em 1em 2em;
    padding: 1em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    background-color: #dfd24f;
    position: relative;
}
ul.selectable li.active {
    margin-right: 0;
    background-color: #4f9ddf;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-top-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    background-image: -ms-linear-gradient(left, #B8E5FF 0%, #55A9F0 100%);
    background-image: -moz-linear-gradient(left, #B8E5FF 0%, #55A9F0 100%);
    background-image: -o-linear-gradient(left, #B8E5FF 0%, #55A9F0 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #B8E5FF), color-stop(1, #55A9F0));
    background-image: -webkit-linear-gradient(left, #B8E5FF 0%, #55A9F0 100%);
    background-image: linear-gradient(to right, #B8E5FF 0%, #55A9F0 100%);
}

ul.selectable li.active:before,
ul.selectable li.active:after {
    content: '';
    position:...