JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<nav>
   <ul>
     <li><a href="#section-2">section 2</a></li>
     <li><a href="#section-3">section 3</a></li>
     <li><a href="#section-4">section 4</a></li>
   </ul>
 </nav>

 <main>
   <section id="section-1" class="one">
   </section>
   <section id="section-2" class="two">
   </section>
   <section id="section-3" class="three">
   </section>
   <section id="section-4" class="four">
   </section>
 </main>

CSS

/* html {
        scroll-behavior: smooth;
    } */

    main {
      height: 100vh;
      overflow: scroll;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    section {
      height: 100vh;
      scroll-snap-align: start;
    }

    nav {
      position: fixed;
      top: 0;
      color: white;
      width: 100%;
    }

    li {
      display: inline-block;
      list-style-type: none;
    }

    a:visited {
      color: white;
    }


    .one {
      background-color: red;
    }

    .two {
      background-color: blue;
    }

    .three {
      background-color: grey;
    }

    .four {
      background-color: green;
    }