JSFiddle - React, Tailwind, and code Playground

HTML

<center>
  <div class="lol">
    <p>How you use your text?</p>
    <div class="menu">
      <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">Купля/продажа</a></li>
        <li><a href="">Аренда</a></li>
        <li><a href="">Оставить заявку</a></li>
        <li><a href="">КОНТАКТЫ</a></li>
      </ul>
    </div>
  </div>
</center>

CSS

a {
   text-decoration: none;
 }
 
 .lol {
   background: green;
   width: 100%;
   height: 145px;
   text-align: center;
 }
 
 .lol p {
   color: #109be6;
   margin: 0;
   padding: 0;
   text-align: center;
   font-size: 50px;
   border-top: 10px solid #78d3fa;
   border-bottom: 10px solid #78d3fa;
   text-shadow: 0 2px 4px #a0a0a0;
 }
 
 .menu ul {
   list-style: none;
   font-size: 0;
   padding-right: 12px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: center;
   -ms-flex-pack: justify;
   justify-content: center;
   margin: 0 auto;
 }
 
 .menu ul li {
   *display: inline-block;
   font-size: 25px;
 }
 
 .menu ul li a {
   white-space: nowrap;
   *height: 100%;
   display: block;
   padding: 19px;
   background: #5faaea;
   color: #fff;
   box-shadow: inset -0px -12px 30px -10px black;
   border-left: 1px solid white;
 }
 
 .menu ul li a:hover {
   box-shadow: inset -0 1px 10px 0 black;
 }