JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="home"></div>
    <div id="about"></div>
    <div id="experience"></div>
    <div id="hobbies"></div>
    <div id="contact"></div>
</body>

CSS

html,
body {
  padding: 0;
  margin: 0;
}
@media only screen and (min-aspect-ratio: 16/10) {
  #home {
    height: 92vh;
    width: 160vh;
    padding: 0 calc(50% - 80vh);
  }
}
@media only screen and (max-aspect-ratio: 16/10) {
  #home {
    width: 100vw;
    height: 57.5vw;
  }
}
@media only screen and (min-aspect-ratio: 16/10) {
  #about {
    height: 108vh;
    width: 160vh;
    padding: 0 calc(50% - 80vh);
  }
}
@media only screen and (max-aspect-ratio: 16/10) {
  #about {
    width: 100vw;
    height: 67.5vw;
  }
}
@media only screen and (min-aspect-ratio: 16/10) {
  #experience,
  #hobbies,
  #contact {
    height: 100vh;
    width: 160vh;
    padding: 0 calc(50% - 80vh);
  }
}
@media only screen and (max-aspect-ratio: 16/10) {
  #experience,
  #hobbies,
  #contact {
    width: 100vw;
    height: 62.5vw;
  }
}
#home {
  background-color: black;
}
#about {
  background-color: #488BFF;
}
#experience {
  background-color: #B3B3B3;
}
#hobbies {
  background-color: #FF7F35;
}
#contact {
  background-color: #803A7D;
}