JSFiddle - React, Tailwind, and code Playground

by Ariel_Tapia

HTML

<!doctype html>
<html class="video">

  <head>
    <meta charset="utf-8">
    <title>Title</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <div class="wrapper">
    <ul id="menu">
      <li id="home">
        <a href="home.html">PERFIL<img src="menu/home.png"></a>
      </li>
      <li id="3d">
        <a href="grafica3d.html">GRAFICA 3D<img src="menu/3d.jpg"></a>
      </li>
      <li id="3">
        <a href="audiovisual.html">AUDIOVISUAL<img src="menu/audio.jpg"></a>
      </li>
      <li id="4">
        <a href="fotomontaje.html">FOTOMONTAJE DIGITAL<img src="menu/ps.png"></a>
      </li>
      <li id="5">
        <a href="contacto.html">CONTACTO<img src="menu/contact.png"></a>
      </li>
    </ul>
  </div>

  <body>
    <h1>
      <div id="video">VIDEO</div>
    </h1>
    <div>
      <video class="player" src="video/1.mp4" width="50%" height="auto" controls></video></div>
    <div class="descrip">
      <p>Text goes here.</div>
  </body>

</html>

CSS

.wrapper * {
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wrapper ul li {
  display: flex;
  margin-bottom: 10px;
}

.wrapper ul li a {
  background: black;
  color: white;
  padding: 5px 10px;
  transform: translateX(calc(-100% + 45px));
  transition: transform 1s ease;
  text-decoration: none;
}

.wrapper img {
  max-width: 32px;
  margin-left: 5px;
}

.wrapper ul li a:hover {
  background: black;
  color: white;
  padding: 5px 10px;
  transform: translateX(0);
}

.wrapper:hover a:focus {
  left: 0;
  background: none;
}

.video h1 {
  font-family: verdana;
  color: white;
  text-align: right;
  margin-right: 5%;
  margin-top: -280px;
  margin-bottom: 50px;
  text-transform: uppercase;
  background-position: center;
  transform: skewX(-20deg);
  transform-origin: top;
   
  position: absolute;
  right: 40px;
  top: 0;
  margin: 0;
}

.video div {
  padding: 2%;
  display: inline;
  border-radius: 15px;
}

#video {
  background-color: black;
  padding: 1%;
  display: inline;
  border-radius: 15px;
}

.video p {
  float: left;
  text-align: left;
  text-indent: 50px;
  border-style: hidden;
  width: 25%;
  margin-left: 25px;
  margin-top: -30px;
}

#descrip {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #f00;
  margin: 0 10px 10px 0;
}

#player {
  float: left;
  align-items: center;
}

.video video {
  float: left;
  align-items: center;
  margin-left: 60px;
}