JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<main>
  <section class="bg-cyan">CYAN</section>
  <section class="bg-magenta">MAGENTA</section>
  <section class="bg-yellow">YELLOW</section>
  <section class="bg-key">BLACK</section>
  <section class="bg-red">RED</section>
  <section class="bg-blue">BLUE</section>
  <section class="bg-green">GREEN</section>
</main>

SCSS

html {
  overflow-y: scroll;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

section {
  height: 100vh;
  position: relative;
  color: white;
}

.bg-cyan {
  background: cyan;
  scroll-snap-align: start;
}

.bg-magenta {
  background: magenta;
  scroll-snap-align: start;
}

.bg-yellow {
  background: yellow;
  color: black;
  scroll-snap-align: start;
}

.bg-key {
  background: black;
  scroll-snap-align: start;
}

.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

.bg-green {
  background: green;
}