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>
        <div>
        
        
      <ul class="accordion">
    <li onmouseup="growDiv(this)">
        <label for="section-1-checkbox">Section 1</label>
        <input id="section-1-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label for="section-2-checkbox">Section 2</label>
        <input id="section-2-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label for="section-3-checkbox">Section 3</label>
        <input id="section-3-checkbox" type="checkbox" name="accordion-level-1" />
        <div class="warp">
            <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            <a>aear</a>
            </div>
        </div>
    </li>
    <li onmouseup="growDiv(this)">
        <label...

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 {
  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: 0 auto;
  padding: 10px;
  cursor: pointer;
  text-align: left;
}

.pages >...

JavaScript

vjs-current-time-displayfunction growDiv(a)
{
  var el = document.querySelectorAll(".accordion li .warp");
  el.forEach(function(element) {
  	element.style.height = "0px";
  });
  var w = a.querySelector('.warp');
  var w2 = w.querySelector('div');
  w.style.height = w2.clientHeight + "px";
  return;
}