JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="cat_menu">
    <nav>
       <ul>
           <li class="first"><a href="pechatnaya-produkcziya/">Печатная продукция</a></li>
           <li><a href="kopirovalnyij-czentr/">Копировальный центр</a></li>
           <li><a href="suvenirnaya-produkcziya/">Сувенирная продукция</a></li>
           <li class="last"><a href="dizajn-i-verstka/">Дизайн и верстка</a></li>
        </ul>
        <ul class=""><li class="first"><a href="kontaktyi/">Контакты</a></li></ul>
    </nav>
</div>
</body>

CSS

body{
    background: #777777; 
}
.cat_menu{
   width: 300px;
    height: 183px;
    padding-top: 22px;
    position: relative;
    z-index: 15;
    
 }

.cat_menu nav{
    width: 100%;
    border-radius: 0px 500px 500px 0;
    height: 450px;
    top: -145px;
    position: relative;
    overflow: hidden;
}

.cat_menu nav>ul{
    position: relative;
    top: 143px;
}

.cat_menu nav{
  
    background: #5d7f9d; 
     
}

.cat_menu ul li{
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    position: relative;
    height: 30px;
}

.cat_menu nav>ul>li:hover{
    background: #FFFFFF;
 }

.cat_menu nav>ul>li>a{
    position: relative;
    font-size: 15px;
    color: #FFFFFF;
    text-transform: uppercase;
    padding-left: 67px;
	display: inline-block;
    height: 30px;
    line-height: 30px;
}
.cat_menu nav>ul>li:hover>a{
    color: #2d77b1;
}