JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html;" 
      http-equiv="Content-Type"/>
  <title>xnimorz</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
    <div id="line1" class="line"></div>
    <div id="line2"class="line"></div>
    <div id="line3"class="line"></div>
    <div id="line4"class="line"></div>
    <div id="line5"class="line"></div>
    <div id="circle"></div>
    <div id="left" class="eye"></div>
    <div id="right" class="eye"></div>
    <div id="mouth"></div>
</body>
</html>

CSS

body
{
 background-color: #81d1f7; 
}
#circle
{
   background-color: #fef504; 
   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f7f70a), to(#ffff00));
   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #f7f70a, #ffff00); 
   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #f7f70a, #ffff00); 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #f7f70a, #ffff00);
   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #f7f70a, #ffff00);
    
    position: absolute;
    left: 200px;
    top:200px;
    width:120px;
    height:120px;
    border-radius:120px;
    border: 1px solid #aaa;
}

#mouth
{
    background-color: #fef504; 
    position : absolute;
    left: 233px;
    top:280px;
    width: 50px;
    height:20px;
    border-radius: 0px 0px 50px 50px;
    border: 2px solid #d65c3b;
}

.eye
{
    position:absolute;
    width: 12px;
    height:20px;
    border-radius: 100px;
    left: 230px;
    top:225px;
    background-color:#f5f5f5;
    border:1px solid #777;
}

#right
{
left:270px;
}

.eye:after
{
content:"";
position : absolute;
width:7px;
height:7px;
border-radius:100px;
left:6px;
top:12px;
background-color:#666;

}
.line
{
border-radius:100px 0px 100px 0px;
position:absolute;
width:70px;
height:70px;
background-color:#ffff00;
border: 1px outset #aaa;

}
.line:before
{
left:-60px;
top:-10px;
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:50px 0px 50px 0px;
background-color:#fef504;

        -webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);    
border: 1px solid #aaa;
}


#line1
{
    left:310px;
    top:140px;
        -webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);    
}
#line2
{
left:340px;
top:260px;

  ...