JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="pages">
  <div class="warp">
    <div class="menu">
      <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 class="head">
         <input type="text">
       </div>
       <div class="warp">
         <div class="corner_shape_top_right">
  <div class="corner_shape_top_right_out">
  </div>
</div>
<div class="corner_shape_top_left">
  <div class="corner_shape_top_left_out">
  </div>
</div>
<div class="corner_shape_bottom_right">
  <div class="corner_shape_bottom_right_out">
  </div>
</div>
<div class="corner_shape_bottom_left">
  <div class="corner_shape_bottom_left_out">
  </div>
</div>


       </div>
    </div> 
  </div>
</div>

CSS

body{
  margin:0;
  padding:0;
  background: #181719;
}
@-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: relative;
  background: #29292b;
  //border-left: solid 2px rgba(255,255,255,0.2);
  //border-right: solid 2px rgba(255,255,255,0.5);
  width: 350px;
  height: 100%;
}
.pages > div > div.menu ul{
  margin: 0;
  padding: 0;
  list-style: none;
  margin-top: 20px;
}
.pages > div > div.menu ul li{
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  cursor: pointer;
}

.pages > div > div.menu ul li:hover{
  background: rgba(0,0,0,0.3);
}
.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 a{
  margin-left: 20px;
}
.pages > div > div.content{
  position:relative;
  //background: rgba(0,0,0,0.8);
  //border-left: solid 2px rgba(255,255,255,0.7);
  //border-right: solid 2px rgba(255,255,255,0.7);
  width: 100%;
  height:100%;
}
.pages > div > div.content > .head{
  position: relative;
  display: grid;
  background:#29292b;
  padding: 10px 20px;
}
.pages > div > div.content > .head input{
  position: relative;
  display:block;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 0;
  background:...