JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<nav role="navigation">
 <div id="performing_enarchesarun">
 <input type="checkbox" /> 
 <span></span>
 <span></span>
 <span></span>
 <ul id="taderkolpeu_ksam">
 <a href="http://zornet.ru/load/81"><li>Скрипты zornet.ru</li></a>
 <a href="http://zornet.ru/load/142"><li>Шаблоны для сайта</li></a>
 <a href="http://zornet.ru/load/144"><li>Стилистика стилей</li></a>
 <a href="http://zornet.ru/" target="_blank"><li>ZorNet: Создание сайта</li></a>
 </ul>
 </div>
</nav>

CSS

body
{
 margin: 0;
 padding: 0;
 

 background: #232323;
 color: #cdcdcd;
 font-family: "Avenir Next", "Avenir", sans-serif;
}

a
{
 text-decoration: none;
 color: #232323;
 
 transition: color 0.3s ease;
}

a:hover
{
 color: #298da5;
}

#performing_enarchesarun
{
 display: block;
 position: relative;
 top: 49px;
 left: 49px;
 
 z-index: 1;
 
 -webkit-user-select: none;
 user-select: none;
}

#performing_enarchesarun input
{
 display: block;
 width: 39px;
 height: 31px;
 position: absolute;
 top: -6px;
 left: -4px;
 
 cursor: pointer;
 
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
 
 -webkit-touch-callout: none;
}

#performing_enarchesarun span
{
 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 
 background: #cdcdcd;
 border-radius: 3px;
 
 z-index: 1;
 
 transform-origin: 4px 0px;
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 opacity 0.55s ease;
}

#performing_enarchesarun span:first-child
{
 transform-origin: 0% 0%;
}

#performing_enarchesarun span:nth-last-child(2)
{
 transform-origin: 0% 100%;
}

#performing_enarchesarun input:checked ~ span
{
 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: #232323;
}

#performing_enarchesarun input:checked ~ span:nth-last-child(3)
{
 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);
}

#performing_enarchesarun input:checked ~ span:nth-last-child(2)
{
 transform: rotate(-45deg) translate(0, -1px);
}

#taderkolpeu_ksam
{
 position: absolute;
 width: 297px;
 margin: -99px 0 0 -49px;
 padding: 49px;
 padding-top: 123px;
 
 background: #ededed;
 list-style-type: none;
 -webkit-font-smoothing: antialiased;
 /* to stop flickering of text in safari */
 
 transform-origin: 0% 0%;
 transform: translate(-100%, 0);
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#taderkolpeu_ksam li
{
 padding: 10px 0;
 font-size: 22px;
}

#performing_enarchesarun...