JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<section class="red">Something</section>
<section class="blue">Something</section>
<section class="green">Something</section>
<section class="yellow">Something</section>
<section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, quas. Dolorem suscipit accusamus incidunt, esse reprehenderit saepe, ipsum quas eveniet nam, nulla voluptatibus distinctio beatae! Laborum rem, similique quidem ut!</p>
  <p>Non delectus, incidunt rem repellendus mollitia cum illum pariatur laudantium quaerat temporibus optio perspiciatis unde fugit iste obcaecati molestias. Dolores animi reiciendis eum architecto quos eligendi mollitia suscipit aliquid ratione!</p>
  <p>Autem in at eaque voluptate ab sint perferendis, dicta quis sequi, ex itaque incidunt rem. Sequi, odio, doloribus aut rerum harum amet illo maxime adipisci veniam ipsam recusandae aliquam itaque.</p>
  <p>Atque incidunt esse iusto velit beatae, modi ipsum fugit dolores deserunt totam maxime, eveniet, sunt sequi necessitatibus blanditiis recusandae voluptatum! Consectetur error a commodi impedit dolores facilis. Rem, veniam provident.</p>
  <p>Labore ad alias eum autem quia voluptatibus mollitia? Maxime dolorem cumque quod dolore aut, incidunt, blanditiis autem a provident eum, ea nobis dolorum dignissimos expedita iure! Inventore neque recusandae nostrum.</p>
  <p>Ullam nihil magni aliquam, rem distinctio voluptas. Sunt distinctio iusto tenetur eveniet inventore quam autem sapiente et, quae ducimus recusandae enim aperiam, consequatur atque reprehenderit deserunt molestias necessitatibus modi velit.</p>
  <p>Facere, amet repudiandae quaerat vel voluptas tempore doloribus corporis pariatur quas asperiores neque excepturi saepe dolor fuga quia adipisci ut recusandae natus quod perspiciatis nemo cumque laboriosam. Modi, ex quidem.</p>
  <p>Nihil tempora in, voluptatibus. Velit eius ut, tempore enim cupiditate ea saepe, culpa sit aliquid, architecto voluptatum nihil deleniti sint quidem odit repellat...

SCSS

* {
  margin: 0;
  padding: 0;
}
section {
  min-height: 100vh;
  position: sticky;
  top: 0;
  background-color: #FFFFFF;
  &.red { background-color: red; }
  &.blue { background-color: blue; }
  &.green { background-color: green; }
  &.yellow { background-color: yellow; }
}