JSFiddle - React, Tailwind, and code Playground

HTML

<div id="balwan">
<div class="kwadrat">
<div id="smallcircle">
    <div id="kapelusz">
    </div>
    <div id="podstawka">
    </div>
    <div id="eyes">
        <div class="eye"></div><div class="eye"></div>
    </div>
    <div id="nose"></div>
</div>
</div>

<div class="kwadrat">
<div id="mediumcircle">
</div>
</div>
<div class="kwadrat">
<div id="bigcircle">
</div>
</div>
</div>
<ul id="button">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

#balwan{
margin-top:-80px;
}
.kwadrat{
    width:100px;
    height:100px;
    border:1px solid transparent;
}
#smallcircle{
    width:50px;
    height:50px;
    background:white;
    border: 2px solid black;
    border-radius:90px;
    margin-top:110px;
    margin-left:22px;
}

#mediumcircle{
    width:70px;
    height:70px;
    background:white;
    border: 2px solid black;
    border-radius:90px;
    margin-top:45px;
    margin-left:12px;
}

#bigcircle{
    width:100px;
    height:100px;
    background:white;
    border: 2px solid black;
    border-radius:90px;
}

#kapelusz{
width:40px;
height:30px;
background:black;
margin-top:-30px;
margin-left:4px;}

#podstawka{
width:60px;
height:10px;
background:black;  
margin-left:-6px;
}

.button{
    width:5px;
    height:5px;
    background:black;
    border-radius:90px;
}
#button{
    margin-top:-150px;
    margin-left:24px;    
}

#eyes{
    margin-top:5px;
    margin-left:-2px;
}
.eye{
    width:5px;
    height:5px;
    background:black;
    margin-left:15px;
    float:left;
}

#nose{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 5px 0 5px;
border-color: #ff0000 transparent transparent transparent;
    margin-top:12px;
    margin-left:20px;
    
}