JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<input type="checkbox" id="zaretukoldsa-lpotydsa" />

<label id="kasnured-lfsaxrun" for="zaretukoldsa-lpotydsa" onClick="legacybrowsertoggle()">Toggle Menu</label>

<nav id="gamirsal-rdikola">

	<ul>
	<li><a href="http://zornet.ru">ZORNET.RU</a></li>
	<li><a href="http://zornet.ru/load/81">СКРИПТЫ</a></li>
	<li><a href="http://zornet.ru/load/142">ШАБЛОНЫ</a></li>
	<li><a href="http://zornet.ru/load/145">CSS ДИЗАЙН</a></li>
	<li><a href="http://zornet.ru/load/144">Графика</a></li>
	</ul>
<label id="lsaxrtun" for="zaretukoldsa-lpotydsa" onClick="legacybrowsertoggle()">Close</label>
</nav>
	
<div class="zorsanilas"><label for="zaretukoldsa-lpotydsa"></label></div>

CSS

body {  
  -webkit-animation: bugfix infinite 1s; 
}

@-webkit-keyframes bugfix { 
  from {padding:0;} 
  to {padding:0;} 
}

label#kasnured-lfsaxrun {  
  z-index: 100;
  display: block;
  position: relative;
  font-size: 10px; 
  width: 3.5em;
  height: 2em;
  top: 0;
  left: 0;
  background: white;
  text-indent: -1000px;
  border: 0.6em solid black; 
  border-width: 0.6em 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; 
}


label#kasnured-lfsaxrun::before,
label#kasnured-lfsaxrun::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
      background: #1b1919;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#zaretukoldsa-lpotydsa:checked ~ label#kasnured-lfsaxrun {
  border-color: transparent;
}

#zaretukoldsa-lpotydsa:checked ~ label#kasnured-lfsaxrun::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#zaretukoldsa-lpotydsa:checked ~ label#kasnured-lfsaxrun::after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#zaretukoldsa-lpotydsa{ 
	display: none;
}

#gamirsal-rdikola {
    position: fixed;
    top: 0;
    right: 0;
    width: 249px;
    height: 100%;
    background: #0f5e63;
    font: bold 1em 'Bitter', sans-serif;
    z-index: 1001;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    visibility: hidden;
    box-shadow: 5px 0 10px rgba(21, 20, 20, 0.23);
    -webkit-transform: translate3d(100%,0,0) rotate(-20deg);
    transform: translate3d(100%,0,0) rotate(-20deg);
}

#gamirsal-rdikola a {
    text-decoration: none;
    color: #fbf9f9;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #211f1f;
}

#gamirsal-rdikola ul{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
	text-align: center;
  font-size:...