JSFiddle - React, Tailwind, and code Playground

by Yuriy Petrichenko

HTML

<div class="common">
<div class="blockone"></div>
<div class="blocktwo"></div>
<div class="blockthree"></div>
<div class="four"></div>
</div>

CSS

body{
  margin:20px;
}
.blockone{
  width:100px;
  height: 100px;
  background-color:red;
  border:2px solid #fff;
  position:relative;
  left:100px;
  top:20px;
  box-shadow: 0px 0px 10px 0px black;
}
.blocktwo{
    width:100px;
  height: 100px;
  background-color:green;
  border:2px solid #fff;
  position:relative;
  left:150px;
  z-index:2;
  box-shadow: 0px 0px 10px 0px black;
}
.blockthree{
    width:100px;
  height: 100px;
  background-color:blue;
  border:2px solid #fff;
  position:relative;
  left:100px;
  bottom:20px;
  box-shadow: 0px 0px 10px 0px black;
}
.four{
  width:20px;
  height:300px;
  background-color:silver;
  position:fixed;
  left:180px;
  top:20px;
  z-index: 5;
  box-shadow: 0px 0px 10px 0px black;
  
  
}
.common{
  background-color:orange;
}