JSFiddle - React, Tailwind, and code Playground

by kouty79

HTML

<h2>Sticky Element: Scroll Down to See the Effect</h2>
  <p>Scroll down this page to see how sticky positioning works.</p>
  <div class="position-relative">
    <div class="sticky">I will stick to the screen when you reach my scroll position</div>

    <p>Some example text..</p>
    <h2>Scroll back up again to "remove" the sticky position.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
      nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec
      congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
      sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
      Nunc
      sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed
      ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
      fermentum.
      Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit
      amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
      odio,
      vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
      massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
      in
      odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
      ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
      dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
      nibh
      tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur
      adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,...

CSS

html,
    body {
      height: 100%
    }

    .sticky {
      position: sticky;
      top: 0;
      border: 2px solid yellow;
      padding: 50px;
      font-size: 20px;
      background-color: white
    }

    .position-relative {
      position: relative;
    }

    .bottom-content {
      min-height: 120%;
    }