JSFiddle - React, Tailwind, and code Playground

by Jacktea

HTML

<!-- Backgrounds -->
<div id="bg"></div>
<div id="bg2"></div>
<div id="bg3"></div>
<!-- Shapes -->
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="sev"></div>
<div id="eight1"></div>
<div id="eight2"></div>
<div id="eight3"></div>
<div id="eight4"></div>
<div id="eight5"></div>
<div id="nine"></div>
<div id="ten"></div>

CSS

#bg {position: absolute;
    height: 756px;
    width: 576px;
    background: black;
    z-index: 0;}
#bg2 {left: 11px;
    top: 11px;
    position: absolute;
    height: 750px;
    width: 570px;
    background: white;
    z-index: 1;}
#bg3 {left: 11px;
    top: 486px;
    position:absolute;
    width: 570px;
    height: 275px;
    background: #FF9999;
    opacity:.4;
    z-index:2;}

#one {left:100px;
    top: 325px;
    position:absolute;
    width:270px;
    height: 135px;
    background:#CC0033;
    z-index: 10;
    opacity:.6;
    border-radius: 100px / 100px;}
#two {position: absolute;
    left:200px;
    top: 325px;
    width: 135px;
    height: 142px;
    background:#CC0033;
    z-index: 10;
    opacity:.6;
    -webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);}
#three {position: absolute;
    left:230px;
    top: 325px;
    width: 45px;
    height: 135px;
    background:white;
    z-index: 10;
    -webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);}
#four {position: absolute;
    left:200px;
    top: 180px;
    width: 310px;
    height: 310px;
    background:red;
    z-index: 9;}
#five {left:150px;
    top: 300px;
    position:absolute;
    width:270px;
    height: 226px;
    background:#CC0033;
    z-index: 10;
    opacity:.6;
    border-radius: 135px / 113px;}
#six {position: absolute;
    left:170px;
    top: 180px;
    width: 300px;
    height: 350px;
    background:red;
    z-index: 9;
    -webkit-transform: skew(170deg);
	-moz-transform: skew(20deg);
	-o-transform: skew(20deg);}
#sev {position: absolute;
    left:50px;
    top: 50px;
    width: 35px;
    height: 60px;
    background:#FFFFCC;
    z-index: 15;}
#eight1 {position: absolute;
    left:55px;
    top: 55px;
    width: 65px;
    height: 60px;
    background:#FFFF66;
    z-index: 16;}
#eight2 {position: absolute;
    left:155px;
    top: 55px;
    width: 65px;
    height: 60px;
   ...