JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="body" class="">
  <div id="logo" class="loaded">
  <div class="voice">
    <svg id="Group_2017" data-name="Group 2017" xmlns="http://www.w3.org/2000/svg" width="44.48" height="65.783" viewBox="0 0 44.48 65.783">
      <path id="Path_8" data-name="Path 8" d="M74.272,23.38a4.492,4.492,0,1,1,6.353,6.353,21.379,21.379,0,0,0,0,30.225,4.531,4.531,0,0,1,0,6.352,4.416,4.416,0,0,1-6.288-.064A30.19,30.19,0,0,1,74.272,23.38Z" transform="translate(-49.887 -12.014)" fill="#fff"/>
      <path id="Path_9" data-name="Path 9" d="M102.456,7.685a4.533,4.533,0,0,1,0,6.353,35.629,35.629,0,0,0,0,50.438,4.525,4.525,0,0,1-3.145,7.7,4.47,4.47,0,0,1-3.145-1.283,44.617,44.617,0,0,1,0-63.144A4.4,4.4,0,0,1,102.456,7.685Z" transform="translate(-83.076 -6.393)" fill="#fff"/>
      <path id="Path_8084" data-name="Path 8084" d="M72.012,23.05a3.351,3.351,0,0,1,4.739,4.739,15.948,15.948,0,0,0,0,22.546,3.38,3.38,0,0,1,0,4.738,3.294,3.294,0,0,1-4.691-.048A22.52,22.52,0,0,1,72.012,23.05Z" transform="translate(-33.24 -5.446)" fill="#fff"/>
    </svg>
  </div>
  <div class="texts">
    <div class="a">
      <span>A</span>
    </div>
    <div class="k">
      <span>K</span>
    </div>
    <div class="u">
      <span>U</span>
    </div>
    <div class="s">
      <span>S</span>
    </div>
    <div class="t">
      <span>T</span>
    </div>
    <div class="i">
      <span>I</span>
    </div>
    <div class="c">
      <span>K</span>
    </div>
    <div class="o">
      <span>O</span>
    </div>
  </div>
</div>
  <nav>
    <div>main</div>
    <div>projects</div>
    <div>faq</div>
    <div>our team</div>
    <div>contact</div>
  </nav>
  <div class="cover">
    <img src="https://images.pexels.com/photos/158826/structure-light-led-movement-158826.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Orbitron:700&display=swap');
@import url('https://fonts.googleapis.com/css?family=PT+Sans+Caption&display=swap');
body {
  background: #111821;
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
* {
  font-family: 'PT Sans Caption', sans-serif;
  font-family: 'Orbitron', sans-serif;
}
#body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: relative;
}
#body  nav {
  color: white;
  margin-top: 60px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  transform: translate(0,50%) rotate(1deg);
  transform-origin: top left;
  opacity: 0;
  transition: 1s;
}
#body.loaded  nav {
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translate(0,0) rotate(0deg);
  transition-delay: 1s;
}
#body  nav div {
  font-family: 'PT Sans Caption', sans-serif;
  text-transform: uppercase;
  margin: 0 30px;
  cursor: pointer;
  transition: .6s;
  position: relative;
}
#body  nav div:after {
  content: '';
  width: 10px;
  height: 10px;
  background: #B85001;
  position: absolute;
  left: -20px;
  opacity: 0;
  transform: translate(-10px,0);
  transition: .6s;
  top: 50%;
  margin-top: -5px;
  border-radius: 50%;
}
#body  nav div:hover {
  color: #B85001;
}
#body  nav div:hover:after {
  transform: translate(0,0);
  opacity: 1;
}
#logo {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
}
#logo .voice {
  transition: 1s;
  transform: translate(-50%,0);
}
.loaded #logo .voice {
  transform: translate(0,0);
  transition-delay: .6s;
}
#logo .voice svg path {
  transition: 1.5s;
  opacity: 0;
}
.loaded #logo .voice svg path:nth-child(3){
  opacity: 1;
  transition-delay: .6s;
}
.loaded #logo .voice svg path:nth-child(1){
  opacity: 1;
  transition-delay: .7s;
}
.loaded #logo .voice svg path:nth-child(2){
  opacity: 1;
  transition-delay: .8s;
}
#logo...

JavaScript

document.querySelector('#body').addEventListener('click',function(){
	this.classList.toggle('loaded')
})