JSFiddle - React, Tailwind, and code Playground

HTML

<html>
       <body>
          <div class="extra_parent">
             <div class="child">ONE</div>
             <div class="child">TWO</div>
             <div class="child">THREE etc..</div>
          </div>
       </body>
    </html>

CSS

body {
        margin: 0;
        padding: 0;
    	scroll-snap-type: y mandatory;
        overflow-y: scroll;
        height: 100vh;
    }

    html {
        height: 100vh;
        overflow: hidden
    }
    
    .child {
        position: relative;
        height: 80vh;
        font-size: 100px;
        text-align: center;
        line-height: 80vh;
        color: #000;
        scroll-snap-align: end;
    }