JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="container_1"></div>
<div id="container_2"></div>
<div id="container_3"></div>
<div id="container_4"></div>
<div id="container_5"></div>
<div id="container_6"></div>
<div id="container_7"></div>
<div id="container_8"></div>
<div id="container_9"></div>
<div id="container_10"></div>
<div id="container_11"></div>
<div id="container_12"></div>
<div id="container_13"></div>
<div id="container_14"></div>
<div id="container_15"></div>
<div id="container_16"></div>
<div id="container_17"></div>
<div id="container_18"></div>
<div id="container_19"></div>
<div id="container_20"></div>
</div>
CSS
* {
padding: 0;
margin: 0;
}
#wrapper {
width: 400px;
height: 400px;
position: relative;
margin: 100px auto;
}
div {
border-radius: 5px;
}
#container_1 {
width: 200px;
height: 200px;
border: 5px solid #889900;
background: #ff0;
position: absolute;
top: 100px;
left: 100px;
box-shadow: 0 0 20px 10px rgba(0,0,0,.4), inset 0 0 20px 10px rgba(0,0,0,.1);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#container_2 {
width: 190px;
height: 190px;
border: 5px solid #889900;
background: #ff0;
position: absolute;
top: 106px;
left: 105px;
box-shadow: 0 0 20px 10px rgba(0,0,0,.4), inset 0 0 20px 10px rgba(0,0,0,.1);
-webkit-transform: rotate(52deg);
-moz-transform: rotate(52deg);
-ms-transform: rotate(52deg);
-o-transform: rotate(52deg);
transform: rotate(52deg);
}
#container_3 {
width: 180px;
height: 180px;
border: 5px solid #889900;
background: #ff0;
position: absolute;
top: 111px;
left: 110px;
-moz-transform: rotate(59deg);
-ms-transform: rotate(59deg);
-o-transform: rotate(59deg);
transform: rotate(59deg);
box-shadow: 0 0 20px 10px rgba(0,0,0,.4), inset 0 0 20px 10px rgba(0,0,0,.1);
-webkit-transform: rotate(59deg);
}
#container_4 {
width: 170px;
height: 170px;
border: 5px solid #889900;
background: #ff0;
position: absolute;
top: 116px;
left: 115px;
-moz-transform: rotate(67deg);
-ms-transform: rotate(67deg);
-o-transform: rotate(67deg);
transform: rotate(67deg);
-webkit-transform: rotate(67deg);
box-shadow: 0 0 20px 10px rgba(0,0,0,.4), inset 0 0 20px 10px rgba(0,0,0,.1);
}
#container_5 {
width: 160px;
height: 160px;
border: 5px solid #889900;
background: #ff0;
position: absolute;
top: 121px;
left: 120px;
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
...