JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>

  <div class="header">header</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo inventore.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, nostrum necessitatibus? Beatae nisi molestiae nostrum ipsa vero. Odit incidunt ea hic consequatur rerum qui sit accusantium laudantium, voluptate nemo...

CSS

body {
  height: 100%;
}
* {
  box-sizing: border-box;
}
.container {
  overflow: hidden;
  height: 3000px;
}
.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: #999;
  color: #FFF;
  padding: 20px;
}