JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" class="minh-100vh snap-area">
</div>

<div id="div2" class="minh-100vh snap-area">
</div>

<div id="div3" class="minh-100vh snap-area">
</div>

<div id="div4" class="minh-100vh snap-area">
</div>

CSS

html {
  scroll-snap-type: y mandatory;
  height: 100vh;
  overflow-y: scroll;
}

.snap-area {
  scroll-snap-align: start;
}

#div1 {
  background-color: blue;
}

#div2 {
  background-color: red;
}

#div3 {
  background-color: purple;
}

#div4 {
  background-color: green;
}

.minh-100vh {
  min-height: 100vh;
}