JSFiddle - React, Tailwind, and code Playground

by Taras Pyatyhorskyy

HTML

<a class="menu-link" href="#menu">
       			<span></span>
       		</a>
     <div class="menu">

  <ul class="nav-block_ul">
         <li><a href='#descr'>О компании</a></li>
         <li><a href='#features'>Преимущества</a></li>
         <li><a href='#production'>Производство</a></li>
         <li><a href='#'>Склад</a></li>
         <li><a href='#products'>Продукция</a></li>
         <li><a href='#clients'>Наши клиенты</a></li>
         <li><a href='#feedback'>Сертификаты</a></li>
         <li><a href='#'>Отзывы</a></li>
         <li><a href='#contacts'>Контакты</a></li>
       </ul>
       </div>

SCSS

.menu-link 
 display: block
 z-index: 9
 width: 50px
 height: 50px
 border-radius: 50%
 box-shadow: 1px 1px 10px rgba(0,0,0,.4)
 background-color: #fff
 position: fixed
 top: 20px
 left: 20px
.menu-link span
 display: block
 height: 2px
 width: 18px
 position: absolute
 margin-left: -9px
 left: 50%
 margin-top: -1px
 top: 50% 
 background-color: #333
 
.menu-link span::before
 transition: all .2s
 content: ''
 display: block
 height: 2px
 width: 18px
 position: absolute
 margin-left: -9px
 margin-top: -6px
 left: 50%
 top: 50% 
 background-color: #333
.menu-link span::after
 transition: all .2s
 content: ''
 display: block
 height: 2px
 width: 18px
 position: absolute
 margin-left: -9px
 margin-top: 4px
 left: 50%
 top: 50% 
 background-color: #333
.menu-link_active span
 background-color: transparent
.menu-link_active span:before
 transform: rotate(135deg)
 margin-top: 0
.menu-link_active span:after
 transform: rotate(-135deg)
 margin-top: 0
.menu
 background-color: violet
 position: fixed
 width: 100vw
 height: 100vh
 z-index: 1
 display: center
 justify-content: center
 align-items: center
.menu ul
  list-style: none
  padding: 0
  text-align: center
.menu a 
 line-height: 4
 font-weight: 100
 letter-spacing: 4px
 color: #fff
 transition: all .2s
.menu a:hover
  display: block
  background-color: rgba(255,255,255, .4)
  text-decoration: none