JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<header>
</header>
<div>
<span>my content</span>
Lorem ipsum dolor sit amet, esse audiam in his. Brute utinam ponderum ex usu, nam sententiae dissentiunt necessitatibus cu. Ceteros dissentiunt eu usu, nam labore eleifend ex. Cu sed falli laboramus scripserit, usu ad noster feugiat delenit. Pri eu erat delenit abhorreant, at qui prompta sadipscing. Errem commune per ad.

Quo et eius delicata. Sit ne rebum viderer accusamus. Eu sed iudico feugiat maiorum. Mel an idque commune ullamcorper.

Quis habemus definitiones ad duo. Id vim ubique tacimates quaerendum, ut epicuri vituperata vim, ex simul conceptam has. Verterem constituam cum in. Vim essent quaeque principes in, sit no modo epicuri mentitum.

Omittam detraxit pri id. Cibo partiendo ius at, ridens viderer scribentur eam cu. Ea nec laudem adolescens, legere philosophia comprehensam in sed. Sea an ferri graeco, pri ne audiam dolorum, eos ei elit iriure evertitur. Nonumes partiendo ius ne.

Laudem iisque referrentur eu vim, meis efficiendi ius et. Vix ne hinc consul blandit, vel et sale volumus percipitur. Utroque adolescens reprimique pri cu, eam labore placerat ne. Qui eu inani contentiones, est te nominavi deleniti. Eum aeterno signiferumque cu, vix cu percipit argumentum.

Ius ex munere insolens. Et quo mentitum sapientem, esse invidunt intellegat et pro. Movet mandamus te mei. Vel in discere percipit indoctum. Esse partem quaerendum vis no.

Justo tamquam conclusionemque qui cu, cum eu etiam consectetuer. Ne sit dolores postulant. At reque quando persequeris mei, eu eos tractatos maluisset vulputate, cu vis malis aeterno feugiat. Delectus adolescens mea id, nec ne graece percipitur interpretaris.

Consul populo splendide te duo, reprimique constituam at duo. His ei modus malis similique, mea ei velit consetetur. Mei commodo nostrum invidunt at, aeque periculis conceptam per ei. Noster nostrum salutatus mei no, eum ut iuvaret labores lucilius, his id sint nostrum. Fuisset detracto ius te, mea eius euripidis...

CSS

header {
  background: red;
  display: block;
  height: 50vh;
  position: relative;
  z-index: 5;
}

div {
  padding: 50px 0 0;
  position: relative;
}

div > span {
  background: blue;
  color: #FFF;
  display: block;
  height: 50px;
  margin: -100px 0 0;
  position: sticky;
  top: 0;
  z-index: 2;
}