JSFiddle - React, Tailwind, and code Playground

HTML

<menu class="tabs">
        <li>
            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">
            <label for="tab-1" class="tab-label-1">Yesterday</label>
        </li>
        <li>
            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">
            <label for="tab-2" class="tab-label-2">Today</label>
        </li>
        <li>
            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3">
            <label for="tab-3" class="tab-label-3">Tomorrow</label>
        </li>
    </menu>
    <div class="clear-shadow"></div>
    <main class="content animated fadeIn flipInY">
        <!--My content-->
        <section class="content-1">
            <h2>Об авторе</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus consequat velit quis venenatis. Nam eleifend dui nec tellus rutrum vestibulum. Mauris sed mauris metus. Aliquam sodales quam at pulvinar sodales. Donec lobortis adipiscing nunc, sed accumsan sem varius ac. Aliquam in nunc bibendum, venenatis mi ac, fermentum justo. Vestibulum vestibulum interdum augue sollicitudin tincidunt. Aliquam tempor quam a pellentesque tempus. Sed aliquet sem vel lectus vehicula, eget cursus lorem aliquet. In hac habitasse platea dictumst.</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi. Vivamus imperdiet orci ac quam egestas placerat. Integer sed ultricies urna. Aenean porttitor, mauris id euismod viverra, lorem nulla ultricies arcu, eu eleifend leo justo quis turpis. Maecenas eu felis a elit ullamcorper posuere sit amet ut purus. Aenean in lacus at arcu sodales lobortis sit amet quis justo. </p>
        </section>
        <section class="my-container content-2"></section>
        <section class="content-3">
            <h2>Портфолио</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus...

CSS

@charset "UTF-8";
body {
    font: normal 100% 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    -webkit-backface-visibility: hidden;
    color: black;
}

.tabs {
    position: relative;
    margin: 0;
    padding: 0;
}

.tabs li {
    list-style-type: none;
    display: inline-block;
    position: relative;
}

.tabs input {
    position: absolute;
    margin: 0;
    z-index: 1000;
/*
    width: 120px;
*/
    width: 100%;
    height: 40px;
    left: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    cursor: pointer;
}

.tabs label {
    background: #5ba4a4;
    background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5ba4a4), color-stop(100%, #4e8c8a));
    background: -webkit-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: -o-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: -ms-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    background: linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    font-size: 15px;
    line-height: 40px;
    position: relative;
    padding: 0 20px;
    display: inline-block;
    color: #385c5b;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), -2px 0 2px rgba(0, 0, 0, 0.1);
}

.tabs label:after {
    content: '';
    background: #fff;
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    display: block;
}

.tabs input:hover + label {
    background: #5ba4a4;
}

.tabs label:first-of-type {
    z-index: 3;
    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
}

.tab-label-2 {
    z-index: 2;
}

.tab-label-3 {
    z-index: 1;
}

/*Style for checked tab*/
.tabs input:checked + label {
   ...