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">
    <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 class="head">
         <input placeholder="search" type="text">
       </div>
       <div class="warp">
         
<ul class="item_menu">
  <li style=" background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);">
    <div>
    <a>Mr Robot</a>
    <ul id="star-rating">
<li class="rated">1</li>
<li class="rated">2</li>
<li class="rated">3</li>
<li>4</li>
<li>5</li>
</ul>
    <a>2012</a>
    <div>
      <p>
          “Proven Innocent” racconta la storia emotiva della lotta di una donna per dimostrare l’innocenza di persone condannate ingiustamente. Il dramma legale segue una sfortunata società di difesa criminale guidata da un avvocato feroce e intransigente, Madeline Scott, che è stato ingiustamente condannato in un caso di omicidio sensazionale che l’ha resa una famigerata ossessione mediatica. Madeline gestisce lo studio legale con il suo socio, Easy Boudreau, l’avvocato che l’ha aiutata a liberarsi dopo 10 anni di carcere. Il loro team comprende anche l’investigatore Bodie Quick e il direttore delle comunicazioni Violet Price, che gestisce un vero podcast criminale che segue ogni indagine.
      </p>
    </div>
     <span><a href="google.fr"></a></span>
    </div>
  </li>
  <li style=" background-image:url(https://pictures.betaseries.com/fonds/banner/6622_1415360495.jpg);"></li>
  <li style="...

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: 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: 100vh;
}
.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...