JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="manifest" href="site.webmanifest">
  <link rel="apple-touch-icon" href="icon.png">
  <!-- Place favicon.ico in the root directory -->

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">


  <meta name="theme-color" content="#fafafa">
</head>

<body>

<nav>
  <a href="#sect-1">Section 1</a>
  <a href="#sect-2">Section 2</a>
  <a href="#sect-3">Section 3</a>
</nav>



<div class="side-nav">
  <button></button>
  <button></button>
  <button></button>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col sect-wrap">
      <section class="style" id="sect-1">
        Section 1
      </section>
      <section class="style" id="sect-2" >
        Section 2
      </section>
      <section class="style" id="sect-3" >
        Section 3
      </section>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>


<script src="https://www.google-analytics.com/analytics.js" async></script>
</body>

</html>

CSS

/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&display=swap&subset=latin-ext');
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
 ...

JavaScript

//vertical scroll
$('body').addClass('stop-scrolling')
$(document).scroll(function() {
  console.log($(document).scrollTop());
})

function noScroll() {
  window.scrollTo(0, 0);
}

// add listener to disable scroll
window.addEventListener('scroll', noScroll);

// Remove listener to re-enable scroll
window.removeEventListener('scroll', noScroll);

var counter = 1;
//Definiras stevilo sekcij
var maxSections = 3;

console.log(counter);

$( "a[href='#sect-1']" ).click(function() {
  $('html, body').animate({
    scrollTop: $("#sect-1").offset().top
  }, 800);
  counter = 1;
  console.log("New counter: "+counter);
});
$( "a[href='#sect-2']" ).click(function() {
  $('html, body').animate({
    scrollTop: $("#sect-2").offset().top
  }, 800);
  counter = 2;
  console.log("New counter: "+counter);
});
$( "a[href='#sect-3']" ).click(function() {
  $('html, body').animate({
    scrollTop: $("#sect-3").offset().top
  }, 800);
  counter = 3;
  console.log("New counter: "+counter);
});

$('html').on('wheel', function(event) {
  if (event.originalEvent.deltaY > 0) {
//scroll down
    counter++;


    $('body').addClass('stop-scrolling');
    console.log("Začetek animacije");
    setTimeout(function () {
      $('body.stop-scrolling').removeClass('stop-scrolling');
      console.log("Konec animacije");
    }, 800);



    if (!(counter > maxSections)) {
      $('html, body').animate({
        scrollTop: $( $("#sect-"+counter) ).offset().top
      }, 800);
    }

  } else {
//scroll up
    counter--;


    $('body').addClass('stop-scrolling');
    console.log("Začetek animacije");
    setTimeout(function () {
      $('body.stop-scrolling').removeClass('stop-scrolling');
      console.log("Konec animacije");
    }, 800);


    if (!(counter < 1)) {
      $('html, body').animate({
        scrollTop: $( $("#sect-"+counter) ).offset().top
      }, 800);
    }

  }

  if (counter <= 0) {
    counter = 1;
  }
  else if (counter >= 3) {
    counter = maxSections;
  }

 ...