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="article_text">
   <div class="">
      <div class=""><img class="https://fr.serie-streaming.net/images/survivors.jpg" src=""></div>
      <div class="">
         <table class="table">
            <tbody>
               <tr>
                  <td>Serie:</td>
                  <td> SURVIVORS</td>
               </tr>
               <tr>
                  <td>Genre :</td>
                  <td><a href="/serie/Drama/streaming-gratuit"> Drama </a>
                     <a href="/serie/Sci-Fi/streaming-gratuit"> Sci-Fi </a>
                  </td>
               </tr>
               <tr>
                  <td>Année:</td>
                  <td> 2008 </td>
               </tr>
               <tr>
                  <td>Format:</td>
                  <td> 60 min </td>
               </tr>
               <tr>
                  <td>IMDB Votes:</td>
                  <td>
                     <div id="rating"> (7,607Votes )</div>
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>
</div>


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

CSS

body{
  margin:0;
  padding:0;
  background: url(http://185.99.134.115/bg.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: 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...