JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="main_tabs">
    <div class="m_tab">
        <a href="/ocenka-dtp"><img id="icon1" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_1.png" alt="" />
<p class="block_text" id="mtb1">Оценка ущерба после ДТП</p></a>
    </div>
    <div class="m_tab">
        <a href="/stoimost-ts"><img id="icon2" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_4.png" alt="" />
<p class="block_text" id="mtb2">Оценка стоимости транспортного средства</p></a>
    </div>
    <div class="m_tab">
        <a href="/fizicheskim-litsam"><img id="icon3" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_5.png" alt="" />
<p class="block_text" id="mtb3">Физическим лицам</p></a>
    </div>
    <div class="m_tab">
        <a href="/yuridicheskim-litsam"><img id="icon4" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_2.png" alt="" />
<p class="block_text" id="mtb4">Юридические лицам</p></a>
    </div>
    <div class="m_tab">
        <a href="/uts"><img id="icon5" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_8.png" alt="" />
<p class="block_text" id="mtb5">Утрата товарной стоймости</p></a>
    </div>
    <div class="m_tab">
        <a href="/raschet-ostatkov"><img id="icon6" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_9.png" alt="" />
<p class="block_text" id="mtb6" style="width: 95px;">Расчет годных остатков</p></a>
    </div>
    <div class="m_tab">
        <a href="/yuridicheskoe-soprovozhdenie"><img id="icon7" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_7.png" alt="" />
<p class="block_text" id="mtb7">Юридическиое сопровождение</p></a>
    </div>
    <div class="m_tab">
        <a href="/fast-calc"><img id="icon8" class="block_icon" src="http://rlexpert.ru/templates/real/images/block_icon_3.png" alt=""/><p...

CSS

body {
    width:940px;
}
.m_tab {
    width:300px;
    display:inline-block;
    position:relative;
    background: url('http://rlexpert.ru/templates/real/images/button-bg.png');
    height:90px;
}
#main_tabs a {
    width: 280px;
    display: block;
    height: 70px;
    margin: 8px 10px 10px 10px;
}
.block_text {
    position:absolute;
}
.m_tab:nth-child(2), .m_tab:nth-child(5), .m_tab:nth-child(8) {
    margin:0 15px;
}
#mtb1,#mtb5,#mtb6,#mtb8 {
    margin-top: 10px;
}
#mtb3,#mtb4,#mtb7,#mtb9 {
    margin-top: 20px;
}
#icon3 {
    top: 0px;
}
.m_tab:hover {
    background: url('http://rlexpert.ru/templates/real/images/button-bg-active.png');
}