JSFiddle - React, Tailwind, and code Playground

by Alex Slepenkov

HTML

<!--Это выпадающее меню-->
    <div class="side">
    <ul class="menu" align="middle">
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
        <li class="menu_list"><a href="#">МЕНЮ</a><ul class="menu_drop">
            <li><a href="#">Пункт 1</a></li>
            <li><a href="#">Пункт 2</a></li>
            <li><a href="#">Пункт 3</a></li>
            <li><a href="#">Пункт 4</a></li>
            <li><a href="#">Пункт 5</a></li>
        </ul></li>
   ...

CSS

.side>ul>li{
    display:inline-block;
    font-size:12px;
}
.side{
margin:5px;
margin-top:2px;
position:relative;
}
 
.menu{
margin:auto;
padding-right:40px;
 
}
/*style-htef*/
a:link{
    color:black;
}
a:visited{
    color:black;
}
a{
    text-decoration:none;
}
ul{
    margin:0;
    padding:0;
    list-style:none;
}
/*Appearance menu*/
.menu a{
    background:#3d3d3d;
    color:#fff;
    padding:10px;
    display:block;
    border-bottom:1px solid #666;
    transition:0.5s;
}
.menu a:hover{
    background:#666;
    padding:10px 0 10px 5px;
}
/*Pop-up menus*/
.menu_list{
    position:relative;
    width:100px;
}
.menu_drop{
    position:absolute;
    width:100%;
    top:100%;
    left:-9999em;
    opacity:0;
    transition:0.5s opacity;
    border-top:3px solid transparent;
}
.menu_list:hover .menu_drop{
    opacity:1;
    left:0;
    position: absolute;
}
/*menu Icons*/
.menu_list::after{
    content: "";
    position: absolute;
    border:3px solid;
    border-color:#eee transparent transparent transparent;
    top:2.5em;
    left:4em;
    transition:0.5s;
}
.menu_list:hover::after{
    transform:scaley(-1);
}
  
/*slider__container*/
.slider__container img{
    max-width:100%;
    position:relative;
}
.slider__container{
  position:relative;
  z-index:-1;
}
/*slide_button*/
.next_button,.prev_button{
    cursor:pointer;
    color:black;
    font-size:46px;
    position:absolute;
    top:40%;
    z-index:10;
}
.next_button{
    right:20px;
}
.prev_button{
    left:20px;
}