JSFiddle - React, Tailwind, and code Playground
HTML
<div id="tabs">
<ul>
<li>
<h3>
<span style="background-image: url('http://mistxs.ru/makeapp/images/icon-1.png')"></span>
Создание приложения
</h3>
</li>
<li>
<h3>
<span style="background-image: url('http://mistxs.ru/makeapp/images/icon-2.png')"></span>
Наполнение
</h3>
</li>
<li>
<h3>
<span style="background-image: url('http://mistxs.ru/makeapp/images/icon-3.png')"></span>
Подключение клиентов
</h3>
</li>
<li>
<h3>
<span style="background-image: url('http://mistxs.ru/makeapp/images/icon-4.png')"></span>
Выгода
</h3>
</li>
</ul>
</div>
CSS
#tabs {
position: static;
margin-bottom: 610px;
}
#tabs ul {
text-align: center;
}
#tabs ul li {
float: none;
padding-bottom: 50px;
margin: 0 10px -4px 10px;
display: inline-block;
background: url('../images/current-tab.png') no-repeat 50% 110%;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#tabs ul li span {
display: block;
height: 64px;
width: 100%;
color: #26a1e0;
margin-bottom: 30px;
background-repeat: no-repeat;
background-position: 50% 100%;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
}
#tabs ul li a {
font-size: 12px;
font-weight: 600;
color: #383838;
text-transform: uppercase;
letter-spacing: 2px;
width: 100%;
}
#tabs ul li a:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .5;
}
#tabs ul li a:focus {
outline: none;
}
#tabs ul li.ui-tabs-active span {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: .5;
}
#tabs ul li.ui-tabs-active {
background: url('../images/current-tab.png') no-repeat 50% 100%;
}
#tabs ul li.ui-tabs-active span,
#tabs ul li a:hover span {
color: #383838;
}
#tabs ul li h3:after {
display: none;
}