JSFiddle - React, Tailwind, and code Playground

by jujuiscody

HTML

<div class="parent">aahha
	<div class="box relative">Relative</div>
	<div class="box absolute">Absolute</div>
	<div class="box fixed">Fixed</div>
  <div class="box static">Static</div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et aliquid, veniam adipisci esse quo eligendi magni tempora animi ex possimus eum tempore nobis. Molestias culpa facere, ut sed ea nihil laboriosam similique, numquam recusandae nostrum aperiam, pariatur ad nobis et consequatur quibusdam quaerat iure! Velit nihil, commodi unde, pariatur autem numquam! Perferendis delectus aperiam impedit vel temporibus dolore amet, nesciunt eveniet eos optio, repudiandae quidem laborum perspiciatis iure enim excepturi? Earum quaerat, totam esse maxime odio corporis sequi voluptatibus rerum. Quos optio accusantium, quaerat veniam consequuntur! Incidunt enim non dolore, quis natus, dicta dolorum sit tempora odio, sed est quasi?</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem molestias accusamus, laudantium cumque blanditiis consequatur facilis nulla asperiores? Cumque qui iusto, laborum quam eaque, reiciendis consequuntur quidem autem animi exercitationem quo incidunt, vero saepe fugiat corrupti doloribus minus facilis minima adipisci sint corporis recusandae dolore assumenda cupiditate? Architecto nobis nulla vel aliquid consequuntur quia voluptatibus, molestiae veniam dolorum doloremque alias, cupiditate tempora ducimus necessitatibus. Quia pariatur ipsum magni voluptatum optio aliquid neque sequi, ea dicta, repellendus veritatis, quidem quis earum. Enim at recusandae quasi libero, officia ea, rerum quae eum autem obcaecati dolor. Necessitatibus aliquam repellendus consequatur sit eaque laudantium veritatis dolores, recusandae impedit libero ad at quasi, minus id consequuntur atque alias facere deleniti eveniet! Voluptatibus excepturi ipsum voluptatem eum molestias fugiat neque vero recusandae aut, quo odit voluptas rerum asperiores praesentium odio...

CSS

.parent {
	background-color: #fff;
	border: 1px solid red;
	position: relative;
}
.box {
	background-color: lightcoral;
	height: 50px;
	width: 150px;
	margin: 10px;
}

.relative {
  position: relative;
   top: 20px; 
}
.absolute {
  position: absolute;
  top: 0px;
}
.fixed {
  position: fixed;
}

.static {
  position: static;
}