JSFiddle - React, Tailwind, and code Playground

by Santos1600

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Freud Got Lynched</title>
    <link rel="stylesheet" type="text/css" href="site1.css">
    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
    <meta charset="UTF-8">
  </head>

  <body>
    <div id="abertura" class="page0" style="display: block;">
      <video autoplay muted loop>
        <source src="assets/fundo1.webm" type="video/webm">
      </video>
      <div class="info">
        <img src="assets/logoprincipal.png" alt="logo" class="logobig">
        <p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch... ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.</p>
        <p class="sonhar">Sonhar</p>
        <a href="javascript:void(0)" id="botao" onclick="SwapDivsWithClick('abertura','segunda');"><img src="assets/botao2.png" alt="botao" class="botao"></a>
      </div>
    </div>
    <div id="segunda" class="page1" style="display: none;">
      <video autoplay muted loop>
        <source src="assets/fundo2.webm" type="video/webm">
      </video>
      <div class="container">
        <div id="myNav" class="overlay">
          <div class="overlay-content">
            <ul>
              <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','episodios');">EPISÓDIOS</a></li>
              <ul>
                <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','ep1');">EPISÓDIO 1</a></li>
                <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','ep6');">EPISÓDIO 2</a></li>
                <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','ep6');">EPISÓDIO 3</a></li>
                <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','ep6');">EPISÓDIO 4</a></li>
                <li><a href="javascript:void(0)" onclick="SwapDivsWithClick('segunda','ep5');">EPISÓDIO 5</a></li>
       ...

CSS

body {
    margin: 0;
    padding: 0;
    background-color: black;
    max-width: 100%;
    overflow-x: hidden
  }

#abertura, #ep1 {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

#abertura video, #ep1 video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#abertura .info {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: 506px;
  margin: auto;
  justify-content: center;
  align-items: center;
}


.logobig {
  margin-top: 10%;
  position: relative;
  max-width: 506px;
  max-height: 292px;
}

.texto {
  margin-top: 15%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: white;
  font-size: 13.5pt;
  font-family: 'Manrope';
  font-weight: 500;
}

.sonhar {
  margin-top: 7%;
  text-align: center;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  color: white;
  font-size: 14pt;
  font-family: 'Manrope';
  font-weight: 800;
}

.botao {
  position: relative;
  margin: auto;
  margin-top: -5%;
  margin-left: 50%;
  transform: translate(-50%);
  width: 120px;
  height: 120px;
}

.botao:hover {
  -webkit-filter: brightness(70%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

#segunda {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
}

#segunda video {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

#segunda .container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
}
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  
}
.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.logomedium {
  position: absolute;
  margin-left: 50%;
  margin-top: 2%;
  transform:...

JavaScript

function SwapDivsWithClick(div1, div2) {
  var d1 = document.getElementById(div1);
  var d2 = document.getElementById(div2);
  if (d2.style.display == "none") {
    d1.style.display = "none";
    d2.style.display = "block";
  } else {
    d1.style.display = "block";
    d2.style.display = "none";
  }
}

//Citações

function swapDiv(){
  var firstString = document.getElementById("quote").innerHTML;
  var secondString = document.getElementById("quote1").innerHTML;
  document.getElementById("quote").innerHTML = secondString;
  document.getElementById("quote1").innerHTML = firstString;
  setTimeout(swapDiv, 5000);
}

setTimeout(swapDiv, 5000);

//icone menu

function myFunction(x) {
  x.classList.toggle("change");
}

//Slideshow
$(document).ready(function() {
  $('.postwrapper').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
  });
});

  //menu


  function toggleNav() {
    navSize = document.getElementById("myNav").offsetWidth;
    if (navSize > 0) {
      return close();
    }
    return open();
  }
  
  
  function open() {
    document.getElementById("myNav").style.width = "20%";
  }
  
  function close() {
    document.getElementById("myNav").style.width = "0";
  }

  function toggleNav3() {
    navSize = document.getElementById("myNav3").offsetWidth;
    if (navSize > 0) {
      return close3();
    }
    return open3();
  }
  
  
  function open3() {
    document.getElementById("myNav3").style.width = "20%";
  }
  
  function close3() {
    document.getElementById("myNav3").style.width = "0";
  }
  
  function toggleNav2() {
    navSize = document.getElementById("myNav2").offsetWidth;
    if (navSize > 0) {
      return close2();
    }
    return open2();
  }
  
  
  function open2() {
    document.getElementById("myNav2").style.width = "20%";
  }
  
  function close2() {
    document.getElementById("myNav2").style.width = "0";
  }

  function toggleNav1() {
    navSize = document.getElementById("myNav1").offsetWidth;
    if...