JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="LA"><p>
LA
</p></div>
<div class="eye" id="righteye"></div>
<div class="eye" id="lefteye"></div>
<div id="mouth"></div>
<div id="AA"><p>
AA
</p></div>
<div class="eye2" id="righteye2"></div>
<div class="eye2" id="lefteye2"></div>
<div id="mouth2"></div>
<div id="line"><p>
vote!
</p></div>
<button id="vote">
vote for LA
</button>
<em>or</em>
<button id="vote">
vote for AA
</button>

CSS

body {
    font-family: "Comic Sans MS";
}
p {
    font-size: 3em;
}
#LA {
   left: 1%;
   top: 13%;
   width: 23%;
   border-radius: 50%;
   height: 30%;
   background-color:  #FF0000;
   position: absolute;
}
.eye {
    background-color: green;
    width:5%;
    height:5%;
    border-radius: 50%;
}
#righteye {
   position: absolute;
   left: 15%;
   top: 17%;
}
#lefteye {
   position: absolute;
   left: 6%;
   top: 17%;
}
#mouth {
   position: absolute;
   width: 10%;
   height: 3%;
   background-color:  #FF9000;
   top: 35%;
   left: 8%;
}
#AA {
    left: 35%;
    top: 1%;
    border-radius: 70%;
    width: 40%;
    height: 40%;
    background-color:  #FF5000;
    padding-top: 30px;
    text-align:center;
    position: absolute;
}
.eye2 {
   background-color: black;
   width:9%;
   height:9%;
   border-radius: 50%;
}
#righteye2 {
    position: absolute;
    left: 40%;
    top: 10%;
}
#lefteye2 {
    position: absolute;
    left: 60%;
    top: 10%;
}
#mouth2 {
    position: absolute;
    left: 40%;
    top: 30%;
    width: 25%;
    height: 5%;
    background-color: yellow;
}
#line {
    position: absolute;
    left: 0%;
    height: 20%;
    width: 100%;
    top: 50%;
    background-color: #cacaca;
}

JavaScript

document.getElementById("mouth2")
    .style.transform = "rotate(200deg)";