JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <h3>Some title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, vitae
        modi, eos impedit quas enim maiores tempora nihil cupiditate nulla odio
        suscipit reprehenderit adipisci neque a eaque natus ad aspernatur.
      </p>
    </section>
    <section>
      <h3>Some title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, vitae
        modi, eos impedit quas enim maiores tempora nihil cupiditate nulla odio
        suscipit reprehenderit adipisci neque a eaque natus ad aspernatur.
      </p>
    </section>
    <section>
      <h3>Some title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, vitae
        modi, eos impedit quas enim maiores tempora nihil cupiditate nulla odio
        suscipit reprehenderit adipisci neque a eaque natus ad aspernatur.
      </p>
    </section>
    <section>
      <h3>Some title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, vitae
        modi, eos impedit quas enim maiores tempora nihil cupiditate nulla odio
        suscipit reprehenderit adipisci neque a eaque natus ad aspernatur.
      </p>
    </section>
    <section>
      <h3>Some title</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, vitae
        modi, eos impedit quas enim maiores tempora nihil cupiditate nulla odio
        suscipit reprehenderit adipisci neque a eaque natus ad aspernatur.
      </p>
    </section>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  scroll-snap-type: y;
  overflow: scroll;
}
section {
  display: block;
  scroll-snap-align: start;
  padding: 20rem 2rem;
  border: 1px solid #ccc;
}
section:nth-child(odd){
  background-color: #ccc;
}