JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="section " id="section0">
        <h1>Section 1</h1>
    </div>
    <div class="section" id="section1">
        <h1>Section 2</h1>
    </div>
    <div class="section" id="section2">
        <h1>Section 3</h1>
    </div>
</div>

CSS

html,body,#container, .section, .slide{
            height: 100%;
        }
        html,body, .section, .slide,h1,h2{
            margin: 0;
        }
        #section0{
            background-color: yellow;
        }
        #section1{
            background-color: red;
        }
        #section2{
            background-color: blue;
        }
        body{
            -ms-scroll-snap-type: y mandatory;
                scroll-snap-type: y mandatory;
        }
        .section{
            scroll-snap-align: start;
        }
        .section{
            text-align: center;
            background-size: cover;
            padding-top:150px;
        }