JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<link rel="stylesheet" href="https://afeld.github.io/emoji-css/emoji.css">
<div class="pages">
  <div class="warp">
    <div class="menu">  <div href="#" class="arrow arrow-left animate-left-to-right"></div>

    <a class="logo">SiteName</a>
    <ul>
        <li><a><i class="em em-heart_eyes"></i></a></li>
        <li><a><i class="em em-gear"></i></a></li>
        <li><a><i class="em em-x"></i></a></li>
        </ul>
      <nav>
        <ul>
        <li><a>Menu #1</a></li>
        <li><a>Menu #2</a></li>
        <li><a>Menu #3</a></li>
        <li><a>Menu #4</a></li>
        <li><a>Menu #5</a></li>
        </ul>
      </nav>
    </div>
    <div class="content">
      
    </div> 
  </div>
</div>

CSS

body{
  margin:0;
  padding:0;
  background: url(http://185.99.134.115/bg2.png);
}
@-webkit-keyframes annimated_blackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes annimated_blackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes annimated_blackground {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes annimated_blackground { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.pages{
  display: grid;
  grid-template-columns: auto;
  grid-gap: 0;
  height: 100vh;
}
.pages > div{
  display: inline-flex;
}
.pages > div > div.menu{
  position: fixed;
  background: #29292b;
  width: 300px;
  height: 100vh;
}
.logo {
  position:absolute;
  width: 110%;
  top:-7.5px;
  margin:15px 0;
  text-align:center;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  border: none;
  font: normal 40px/normal "Frijole", Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  z-index:-1;

}
.pages > div > div.menu > ul{
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 20px;
  display: flex;
}
.pages > div > div.menu ul li{
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  cursor: pointer;
  text-align:center;
}
.pages > div > div.menu ul li a{
  -webkit-transition: margin-left 0.5s; /* Safari prior 6.1 */
  transition: margin-left 0.5s;
  color: white;
}
.pages > div > div.menu ul li:hover{
  background: rgba(0,0,0,0.3);
}
.pages > div > div.menu ul li:hover a{
 // margin-left: 20px;
}
.pages > div > div.menu nav ul{
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 20px;
}
.pages > div > div.menu nav ul li{
  width: 80%;
  margin: 0 auto;
  padding: 10px;
 ...