JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<link rel="stylesheet" href="http://rlexpert.ru/templates/real/css/style.css">
<div id="main_small_blocks">
    <div id="main_small_block1" class="main_small_block">
        <a href="/otzyvy-polnostyu">
            <span id="msbs1">Отзывы</span>
            <img src="http://rlexpert.ru/templates/real/images/bottom_icon1.png" alt="" />
        </a>
    </div>
    <div id="main_small_block2" class="main_small_block">
        <a href="#" onclick="return false;">
            <span id="msbs2" class="iz_calc_activate">Калькулятор износа</span>
            <img src="http://rlexpert.ru/templates/real/images/main_calc_big.png" alt="" class="iz_calc_activate"/>
        </a>
    </div>
    <div id="main_small_block3" class="main_small_block">
        <a href="#" onclick="return false;">
            <span id="msbs3" class="st_calc_activate">Калькулятор стоимости</span>
            <img src="http://rlexpert.ru/templates/real/images/main_gold_big.png" alt="" class="st_calc_activate"/>
        </a>
    </div>
    <div id="main_small_block4" class="main_small_block">
        <a href="/usefull-info">
            <span id="msbs4">Полезное</span>
            <img src="http://rlexpert.ru/templates/real/images/bottom_icon2.png" alt="" />
        </a>
    </div>
    <div id="main_small_block5" class="main_small_block">
        <a href="/laws">
            <span id="msbs5">Законодательство </span>
            <img src="http://rlexpert.ru/templates/real/images/bottom_icon3.png" alt="" />
        </a>
    </div>
    <div id="main_small_block6" class="main_small_block">
        <a href="/k2-test">
            <span id="msbs6">Наши работы</span>
            <img src="http://rlexpert.ru/templates/real/images/bottom_icon4.png" alt="" />
        </a>
    </div>
</div>

CSS

#main_small_blocks {
    background:url(http://rlexpert.ru/templates/real/images/main_small_box_shadowbg.png);
    height: 121px;
    width: 940px;
    position: relative;
}
.main_small_block {
    height: 121px;
    width: 150px;
    display:inline-block;
}
.main_small_block {
    height: 121px;
}
#main_small_block1 img {
    position: absolute;  
    left: 39px;  
    top: 50px;
}

#main_small_block6 img {
    position: absolute;
    right: 38px;
    top: 40px;
}

#main_small_block5 img {
    position: absolute;  
    right: 196px;  
    top: 40px;
}

#main_small_block4 img {
    position: absolute;  
    right: 358px;  
    top: 46px;
}

#main_small_block3 img {
    position: absolute;  
    left: 357px;  
    top: 47px;
}

#main_small_block2 img {
    position: absolute;  
    left: 193px;  
    top: 46px;
}

.main_small_block a {
    text-decoration: none;
    color: #3d3d3d;
    font-style: italic;
}

#msbs1 {
    position: absolute;
    left: 40px;
    top: 15px;
}
span#msbs2 {
    position: absolute;  
    left: 183px;  top: 15px;
    width: 90px;
    text-align: center;
}

span#msbs3 {
    position: absolute;  
    left: 344px;  top: 15px;
    width: 90px;
    text-align: center;
}

span#msbs4 {
    position: absolute;  
    right: 360px;  top: 15px;
}

span#msbs5 {
    position: absolute;  
    right: 166px;  top: 15px;
}

span#msbs6 {
    position: absolute;  
    right: 25px;  top: 15px;
}