JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="one"></div>
<div id="two">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa recusandae ut dolores accusantium non, numquam, id praesentium incidunt tenetur, provident quos, nesciunt sequi! Hic non voluptates repellendus sint, facere accusamus!
</div>
<button id="test">fwe</button>

CSS

body {
  margin: 0;
  position: relative;
  padding-top: 100px;
}
body.active {
  padding-top: 0;
}
#one {
  height: 100vh;
  background: red;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 1s;
}
.active #one {
  position: relative;
  height: 100px;
}
#two {
  width: 100%;
  height: 50vh;
  background: yellow;
}
button {
  position: fixed;
  top:0;
  z-index: 2;
}

JavaScript

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