JSFiddle - React, Tailwind, and code Playground

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;
}

.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;
    margin: 0;
    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;
}