JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="asrukil_zornet_ru_dsam">

  <input type="checkbox" id="togglebox" />
  <label for="togglebox" class="asrunikgren" id="mainlabel_ie">Site Menu</label>

  <div class="kalironsuades" id="menuflip_ie">
    <h4>Site Navigation</h4>
    <ul>
      <li><a href="Ссылка">Home</a></li>
      <li><a href="Ссылка">DHTML</a></li>
      <li><a href="Ссылка">CSS Library</a></li>
      <li><a href="Ссылка">Webmaster Tools</a></li>
      <li><a href="Ссылка">CSS Drive</a></li>
      <li><a href="Ссылка">JavaScript Kit</a></li>
    </ul>
    <label for="togglebox" class="tersakiladsen">x</label>
  </div>
</div>

CSS

body {
  /* webkit adjacent sibling bug fix */
  -webkit-animation: bugfix infinite 1s;
}

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

div.asrukil_zornet_ru_dsam {
  position: relative;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

div.asrukil_zornet_ru_dsam input {
  display: none;
}

div.asrukil_zornet_ru_dsam label.asrunikgren,
div.asrukil_zornet_ru_dsam div.kalironsuades {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  /* transition speed etc */
}

div.asrukil_zornet_ru_dsam label.asrunikgren {
  /* menu anchor text style */
  width: 200px;
  /* width of anchor text */
  font: bold 20px Tahoma;
  position: relative;
  top: 0;
  display: block;
  padding-left: 34px;
  /* add left padding to make room for icon */
  cursor: pointer;
}

div.asrukil_zornet_ru_dsam label.asrunikgren:before {
  /* menu anchor icon */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border: 7px solid darkgreen;
  -webkit-box-shadow: inset 0 0 2px gray, 0 0 5px gray;
  box-shadow: inset 0 0 2px gray, 0 0 5px gray;
  border-radius: 30px;
}

div.asrukil_zornet_ru_dsam div.kalironsuades {
  /* DIV that flips over to reveal main menu */
  position: absolute;
  margin: 0;
  top: 0;
  padding: 4px;
  background: white;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  width: 200px;
  border: 1px solid gray;
  -webkit-box-shadow: 2px 2px 15px #B5B5B5;
  box-shadow: 2px 2px 15px #B5B5B5;
  border-radius: 10px;
  background: #eee;
}

div.asrukil_zornet_ru_dsam div.kalironsuades h4 {
  margin: 0;
  margin-bottom: 4px;
  font-size: 20px;
  padding: 4px 0 0 6px;
}

div.asrukil_zornet_ru_dsam div.kalironsuades ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div.asrukil_zornet_ru_dsam div.kalironsuades ul...