JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">

    <div class="circle1">    
        <div class="circle2">     
            <div class="circle3">             
                <div class="circle4">            
                    <div class="circle5">                         
                        <div class="logo"><p>Logo</p></div>                
                    </div>
                </div>
            </div>
        </div>    
    </div>
    
    
    <div id="navcontainer">
        <ul id="navlist">
            <li><a href="#">Item one</a></li>
            <li><a href="#">Item two</a></li>
            <li><a href="#">Item three</a></li>
            <li><a href="#">Item four</a></li>
            <li><a href="#">Item five</a></li>
        </ul>
    </div>
    
    <div id="content">hi</div>
    
    
</div>

CSS

.circle1 {
    background: #993333;
    width: 45em;
    height: 45em;
    position:relative;
    
    -moz-border-radius: 25em;
    -webkit-border-radius: 25em;
    border-radius: 25em;
    border:2px solid #99FF33;
    
}
.circle1:after{
    width:75px;
    height:40px;
    bottom:0px;
    left:20em;
    background-color:#CCCCCC;
    content:"";
    position:absolute;   
    
}

.circle2 {
    background: #00CCFF;
    width: 40em;
    height: 40em;
    -moz-border-radius: 25em;
    -webkit-border-radius: 25em;
    border-radius: 25em;
    padding:0px;
    margin:2.4em auto;
    border:2px solid #99FF33;
    position:relative;
}

.circle2:after{
    width:40px;
    height:74px;
    top:17.5em;
    left:0em;
    background-color:#CCCCCC;
     content:"";
    position:absolute;   
    
}

.circle3 {
    background: #0099CC;
    width: 35em;
    height: 35em;
    -moz-border-radius: 20em;
    -webkit-border-radius: 20em;
    border-radius: 20em;
    border:2px solid #99FF33;
    margin:2.4em auto;
    position:relative;
}

.circle3:after{
    width:75px;
    height:60px;
    top:0;
    left:15.4em;
    background-color:#CCCCCC;
     content:"";
    position:absolute;   
    
}

.circle4 {
    background: #FF6666;
    width: 28em;
    height:28em;
    -moz-border-radius: 15em;
    -webkit-border-radius: 15em;
    border-radius:15em;
    margin:3.5em auto;
    border:2px solid #99FF33;
    position:relative;
    

}

.circle4:after{
    width:65px;
    height:60px;
    top:20em;
    left:3em;
    background-color:#CCCCCC;
    content:"";
    position:absolute;  
    
    -moz-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -webkit-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -o-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    -ms-transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg, 30deg);
    transform: scale(1) rotate(20deg) translate(0px, 0px) skew(-25deg,...