JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="service"> <a href="/" class="service-list">
<img src="http://imtw.ru/uploads/imperiall/imgs/imp1336292143__.png">
<p>Строительно-монтажные работы</p>
</a>
<a href="/" class="service-list">
<img src="http://imtw.ru/uploads/imperiall/imgs/imp1336292143__.png">
<p>Строительно-монтажные работы</p>
</a>
<a href="/" class="service-list">
<img src="http://imtw.ru/uploads/imperiall/imgs/imp1336292143__.png">
<p>Услуги проектирования</p>
</a>
<a href="/" class="service-list">
<img src="http://imtw.ru/uploads/imperiall/imgs/imp1336292143__.png">
<p>Строительно-монтажные работы</p>
</a>
<a href="/" class="service-list">
<img src="http://imtw.ru/uploads/imperiall/imgs/imp1336292143__.png">
<p>Строительно-монтажные работы</p>
</a>
</div>
</div>
CSS
.container {
margin-left: auto;
margin-right: auto;
}
.service {
height: 121px;
}
.service-list {
float: left;
width: 20%;
height: 120px;
display: block;
text-decoration: none;
color: #3c4148;
font-size: 12px;
font-family: MyCustomFont, Verdana, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
padding: 37px 16px;
border: 1px solid white;
}
.service-list img, .service-list p {
display: inline-block;
vertical-align: middle;
}
ul.service-list {
font-size: 12px;
font-family: MyCustomFont, Verdana, Arial, sans-serif;
font-weight: bold;
}
ul.service-list li {
display: inline-block;
width: 213px;
height: 121px;
}
ul.service-list li a {
text-align: center;
text-decoration: none;
display: block;
padding: 17px 46px;
color: #3c4148;
}
.service a:hover {
background-color: #eeeeee;
border: 1px solid #e6e6e6;
}