JSFiddle - React, Tailwind, and code Playground

by Damir Kupriyanov

HTML

<div class="wrapper">
    <div class="main-head-switch">
        <ul class="main-head-tabs">
            <li class="main-head-tab"> <span class="tab-text">ТекстТекст</span>
 <span class="tab-descriptor"><p>ТекстТекстТекстТекстТекстТекстТекстТекстТекст</p></span>

            </li>
        </ul>
        <ul class="main-head-tabs">
            <li class="main-head-tab"> <span class="tab-text active">ТекстТекст</span>
 <span class="tab-descriptor"><p>ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст</p></span>

            </li>
        </ul>
        <ul class="main-head-tabs">
            <li class="main-head-tab"> <span class="tab-text">ТекстТекст</span>
 <span class="tab-descriptor"><p>ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст</p></span>

            </li>
        </ul>
        <ul class="main-head-tabs">
            <li class="main-head-tab"> <span class="tab-text">ТекстТекст</span>
 <span class="tab-descriptor"><p>ТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекстТекст</p></span>

            </li>
        </ul>
    </div>
</div>

CSS

li {
    list-style-type: none;
}
.wrapper {
    padding: 0 20px;
}
.main-head-switch {
    margin: 0 0 35px;
    padding: 30px 0 30px;
}
.main-head-tabs {
    display: inline-block;
    cursor: pointer;
    padding: 0 10px;
    vertical-align: top;
    outline: medium none;
    user-select: none;
    -ie-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}
.main-head-tabs:first-child {
    padding-left: 0;
}
.main-head-tabs .tab-text {
    font-size: 30px;
    color: #1e2934;
}
.main-head-tabs .tab-text:hover {
    color: #0056ab;
}
.main-head-tabs .tab-text.active {
    color: #0056ab;
}
.main-head-tabs .tab-descriptor {
    font-size: 13px;
    line-height: 24px;
    display: block;
    color: #999;
}