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 {
    width: 1012px;
    margin-left: auto;
    margin-right: auto;
  }
.service {
    margin: 0 36px;
    height: 121px;
    float: left;
  }
  .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;
  }