JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="content-wrap">
  <li class="content-box">
     <i class="fa fa-bell" aria-hidden="true"></i>
      <a href="#">О нас</a> </li>
  <li class="content-box">
       <i class="fa fa-bell" aria-hidden="true"></i>
       <a href="#">Меню</a></li>
  <li class="content-box">
       <i class="fa fa-bell" aria-hidden="true"></i>
       <a href="#">Услуги</a></li>
  <li class="content-box">
      <i class="fa fa-bell" aria-hidden="true"></i>
       <a href="#">Контакты</a></li>
</ul>

<script src="https://use.fontawesome.com/98454198fb.js"></script>

CSS

* { /*стили для всех элементов страницы по дефолту*/
  box-sizing: border-box;
  padding:0;
  margin:0;
  outline:none;
}

ul {
  list-style:none;
}

a {
  text-decoration:none;
  color: #fff;
  font-family:Tahoma;
}

body{
  background: #43546a;
}

.content-wrap { /*родительский контейнер*/
  margin:10px;
  display:flex;
  flex-direction:column;
  width:350px;
  background: #fff;
  padding: 10px;
}

.content-box { /*дочерние блоки*/
  position:relative;
  background:#c2c2c2;
  margin-bottom: 5px;
}

.content-box:last-child{ /*убираем падинг для последнего блока*/
  margin-bottom:0;
}


.content-box i{ /*иконочка*/
  display:block;
  background: #e1146a;
  padding: 30px;
  float:left;
  color: #fff;
}

.content-box a{ /*ссылка и ее выравнивание*/
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}