JSFiddle - React, Tailwind, and code Playground

by silviapan

HTML

<html>
  <body>
    <main>
      Placeholder to force scroll
      <br>Scroll to see effect of fixed position
      <div id="sticky-element">
        Sticky element
      </div>
    </main>
  </body>
</html>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
  border: 1px solid #0089dd;
}

main {
  height: 120vh;
}

div {
  width: 50%;
  background-color: white;
  border: 1px solid #dd001b;
}

#sticky-element {
  position: sticky;
  top: 0;
}