JSFiddle - React, Tailwind, and code Playground

by tj_slash

HTML

<div class="tabs">
    <input type="radio" name="tab" id="tab1" checked="checked" />
    <label for="tab1">Новости<div class="tab">Новости</div></label>
    <input type="radio" name="tab" id="tab2" />
    <label for="tab2">О нас<div class="tab">О нас</div></label>
    <input type="radio" name="tab" id="tab3" />
    <label for="tab3">
        Хабрахабр
        <div class="tab"><a href="http://habrahabr.ru/">Хабрахабр</a></div>
    </label>
    <input type="radio" name="tab" id="tab4" />
    <label for="tab4">Помощь<div class="tab">Помощь</div></label>
    <input type="radio" name="tab" id="tab5" />
    <label for="tab5">F.A.Q.<div class="tab">F.A.Q.</div></label>
</div>

CSS

.tabs {
    position: relative;
    width: 100%;
    height: 100px;
}
.tabs input {
    display: none;
}
.tabs label {
    display: inline-block;
    float: left;
    zoom: 1;
    margin: 0;
    padding: 15px 10px;
    cursor: pointer;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    background: #EEEEEE;
}
.tabs label:last-child {
    border-right: 1px solid #999;
}
.tabs label:hover {
    background: #D1D1D1;
}
.tabs .tab {
    position: absolute;
    left: 0px;
    top: 45px;
    background: #FFF;
    width: 100%;
    height: auto !important;
    border: 1px solid #999;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 20px;
    display: none;
    cursor: default;
}
.tabs input:checked + label {
    background: #D2D2D2;
}
.tabs input:checked + label > .tab {
    display: block;
}