JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<body>
<div id="hawkMenu">
    <a href="#" class="hawkMenuA">Главная</a>  
        <a href="#" class="hawkMenuA">Форум</a>  
        <a href="#" class="hawkMenuA">Блог</a>  
    <a href="#" class="hawkMenuA">Каталог</a> 
</div>
</body>

CSS

body {background-color:#e3e3e3;
}

#hawkMenu {
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    position:fixed;
    width:210px;
    left:-180px;
    transition-duration:1.0s;
    border-radius:15px;
}
#hawkMenu:hover {
    left:-10px;
    
}
.hawkMenuA {
    font-f
    text-decoration:none;
    color:#000;
    border-radius:10px;
    width:140px;
    margin-left:25px;
    padding:5px;
    display:block;
    background: rgb(191,210,85); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera...