JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<div class="pages">
  <div class="warp">
    <div class="menu">
    <a class="logo">SiteName</a>
    <ul>
        <li><a>#1</a></li>
        <li><a>#2</a></li>
        <li><a>#3</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 class="head">
         <input placeholder="search" 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%;
}
.logo {
  display:block;
  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;

}
.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:...