JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one">One</div>
<div id="two">Two</div>
<div id="Three">Three</div>
<div id="Four">Four</div>
<div id="Five">Five</div>

CSS

#one{
          border: solid 5px silver;
          background-color:Aqua ;
          position: absolute;
          z-index: 1;
          opacity:0.5;
          height: 100px;
          width: 100px;
          }
 #two{
          border: solid 5px silver;
          background-color: GreenYellow;
          position: absolute;
          top: 30px;
          left: 35px;
          z-index: -2;
          opacity:0.5;
          height: 100px;
          width: 100px;
          }

 #Three{
          border: solid 5px silver;
          background-color: Coral;
          position: absolute;
          top: 60px;
          left: 60px;
          opacity:0.5;
          z-index: 3;
          height: 100px;
          width: 100px;
          }

 #Four{
          border: solid 5px silver;
          background-color: Yellow;
          position: absolute;
          top: 90px;
          left: 90px;
          opacity:0.5;
          z-index: 4;
          height: 100px;
          width: 100px;
          }

 #Five{
          border: solid 5px silver;
          background-color: MediumSpringGreen;
          position: absolute;
          top: 120px;
          left: 120px;
          opacity:0.5;
          z-index:5;
          height: 100px;
          width: 100px;
          }