JSFiddle - React, Tailwind, and code Playground

by sarahchima

HTML

<html>
	<body>
  	<div class="parent-element">
      <div class="sibling-element">
      	I'm the other sibling element
      </div>
      
    	<div class="main-element">
      	All eyes on me. I am the main element.
      </div>
      
      <div class="sibling-element">
      	I'm the other sibling element
      </div>
    </div>
    
  </body>
<html>

CSS

.sibling-element {
	background: #f2f2f2;
	padding: 10px;
  border: 1px solid #81adc8;
} 

.main-element {
    position: sticky;
    top: 10px;
    background-color: yellow;
    padding: 10px;
}

.parent-element {
    position: relative;
    height: 800px;
    padding: 50px 10px;
    background-color: #81adc8;
}