JSFiddle - React, Tailwind, and code Playground

HTML

<div id="catalog" >
<div id="left_button" ><span class="uslugi"><a title="Информация об услугах" href="index.html">Услуги</a></span></div>
<div id="middle_button"><span class="price"><a title="Информация о стоимости" href="price/index.html">Стоимость</a></span></div>
<div id="right_button"><span class="contacts"><a title="Информация об услугах" href="contacts/index.html">Контакты</a></span></div>
</div>

CSS

#catalog{       
        position:relative;
        left: 241px;
        color: #718447;
        top: 33px;
        font-size: 19px;
        font-weight: normal;
        text-align:center;
                }
/* 3 дива с различными изображениями внутри каждого дива */     
#left_button,#middle_button,#right_button{
    width:221px; 
    height:46px;
    line-height:46px; 
    float:left; 
    border:1px dashed red;   
} 
#left_button {
    background-image:url(header_front-1.jpg);
}       
#middle_button{
    background-image:url(header_front-2.jpg);
} 
#right_button{
    background-image:url(header_front-3.jpg);
}  
/* стиль текста первого дива*/  
.uslugi a,.price a,.contacts a{
    color: #075643;  
    text-decoration: none;
}