JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="hdr"></div>
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />
11111<br /><br />11111<br /><br />
<div class="content">
<div class="stikc"></div>
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
aaaaaaa<br /><br />
</div>

CSS

.stikc  {
  position: sticky;
  top: 25px;
  border: 10px solid red;
  border-radius: 10px;
}

.content {
  background: #bbb;
  transform: translateY(25px);
}

.hdr {
  position: fixed;
  z-index: 100;
  top: 0px;
  width: 80%;
  height: 50px;
  border-radius: 30px;
  background: rgba(45, 127, 45, 0.5);
}