JSFiddle - React, Tailwind, and code Playground

HTML

<section id="listContainer" class="list-container animated fadeIn flipInY">
    <header class="list-header">
        <h1>TO DO LIST</h1>
    </header>
    <menu class="tabs">
        <li>
            <input id="tabYesterdayList" type="radio" name="radio-set"/>
            <a href="#yesterdayList">
                <label for="tabYesterdayList">
                    Yesterday
                </label>
            </a>
        </li>
        <li>
            <input id="tabTodayList" type="radio" name="radio-set"/>
            <a href="#itemsContainer">
                <label for="tabTodayList">
                    Today
                </label>
            </a>
        </li>
        <li>
            <input id="tabTomorrowList" type="radio" name="radio-set" />
            <a href="#tomorrowList">
                <label for="tabTomorrowList">
                    Tomorrow
                </label>
            </a>

        </li>
    </menu>
    <main class="content">
        <section id="yesterdayList" class="content-1">
            <h2>Об авторе</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </section>
        <section id="itemsContainer" class="content-2">
            <h2>Портфолио</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </section>
        <section id="tomorrowList" class="content-3">
            <h2>Контакты</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
            <h3>А также...</h3>
            <p>Nullam non quam sit amet enim rhoncus scelerisque vitae ut nisi.....</p>
        </section>
    </main>
    <footer id="statistic" class="statistic"></footer>
</section>

CSS

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

.background {
    background: url('../img/hover_button.png') repeat;
    box-shadow: inset 0px 0px 0px 2px white;
    font-size: 22px;
    font-weight: 300;
}

.list-header {
    background-image: -webkit-linear-gradient(top, #53c5c5 50%, #3aaaaa 50%);
}

.list-header h1 {
    margin: 10px 0;
    text-align: center;
}

.list-container {
    position: relative;
    max-width: 420px;
    margin: auto;
    letter-spacing: 0pt;
    word-spacing: 0.2pt;
    font-size: 22px;
    font-weight: 300;
    text-align: left;
    border: 3px solid white;
    display: -moz-inline-box;
    display: inline-block;
    vertical-align: middle;
}

.tabs {
    margin: 0;
    padding: 0 10px;
    text-align: center;
}

.tabs li {
    position: relative;
    list-style-type: none;
    display: table-cell;
}

.tabs li input {
    position: absolute;
    display: inline-block;
    margin: 0;
    cursor: pointer;
}

.tabs li input:checked ~ a {
    background: #fff;
}

.tabs label {
    display: inline-block;
}

.tabs a {
    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;
    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);
    text-decoration:...