JSFiddle - React, Tailwind, and code Playground

HTML

<!--Designed  by Severov-->
<div class="main">
    <div id="box_shadow">
    <ul>
        <li class="li_1"> Главная </li>
        <li class="li_2"> О нас </li>
        <li class="li_3"> Контакты </li>
        <li class="li_4"> Видео </li>
        <li class="li_5"> Каталог </li>
    </ul>
    </div>
</div>

CSS

body {
    margin: 30px;
}

.main {
    width: 300px;
    height: 450px;
    box-shadow:
   0 1px 4px rgba(0, 0, 0, .3),
   -23px 0 20px -23px rgba(0, 0, 0, .8),
   23px 0 20px -23px rgba(0, 0, 0, .8),
   0 0 40px rgba(0, 0, 0, .1) inset;
    border-radius: 15px;
}
ul {
    margin-left: -40px;
    position: relative;
    list-style: none;
    text-align: center;
}
li {
    font-size: 15px;
    font-family: Impact, Charcoal, sans-serif;
    padding-top: 30px;
    background: #fff;
    width: 300px;
    height: 60px;
    display: table;
}
li:before {
    content: ">"; 
    color: red;
}
li:after {
    content: "<"; 
    color: red;
}
.li_1:hover {
    border-radius: 15px 15px 0px 0px;
    transition: .3s all;
    background: #1E90FF;
}
.li_2:hover {
    transition: .3s all;
    background: #90EE90;
}
.li_3:hover {
    transition: .3s all;
    background: #FFA500;
}
.li_4:hover {
    transition: .3s all;
    background: #DA70D6;
}
.li_5:hover {
    border-radius: 0px 0px 15px 15px;
    transition: .3s all;
    background: #DC143C;
}