JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<div class="ty-tabs cm-j-tabs clearfix">
    <ul class="ty-tabs__list">
        <li id="description" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Description</a> 
        </li>
        <li id="features" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Features</a> 
        </li>
        <li id="discussion" class="ty-tabs__item cm-js active"> <a class="ty-tabs__a">Review</a> 
        </li>
    </ul>
</div>

CSS

.clearfix:before, .clearfix:after {
    display: table;
    content:"";
    line-height: 0;
    margin: 0 auto;
}
.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    display: table;
    content:"";
    line-height: 0;
}
div {
    display: block;
}
body, p, div, li {
    color: #333;
    font-family:'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
}
ul {
    padding: 0;
    display: table;
    margin: 0 auto;
    list-style: none;
}
.ty-tabs {
    margin-top: 4px;
    vertical-align: bottom;
    border-bottom: 1px solid #e7e7e7;
}
.ty-tabs__list {
    vertical-align: bottom;
}
.ty-tabs__item.active, .ty-tabs .subtab.active {
    background: #fff;
}
.ty-tabs__item, .ty-tabs .subtab {
    float: left;
    vertical-align: bottom;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 0;
    margin: 2px 2px 0 0;
    padding: 0 0 0 3px;
    position: relative;
}
.ty-tabs__a, .ty-tabs .subtab a {
    display: block;
    margin: 8px 20px 0 20px;
    height: 23px;
}
a {
    font-family:'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    text-decoration: none;
    outline: none;
    cursor: pointer;
}