JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<div id="feedback">
<a href="#">
<div id="smiley3">
 <div id="leye"></div>
 <div id="reye"></div>
 <div id="sad"></div>
</div>
</a>



<a href="#">
<div id="smiley2">
 <div id="leye"></div>
 <div id="reye"></div>
 <div id="neutral"></div>
</div>
</a>

<a href="#">
<div id="smiley">
 <div id="leye"></div>
 <div id="reye"></div>
 <div id="happy"></div>
</div>
</a>
</div>

CSS

#feedback{
position: absolute; 
bottom: 0;
}

#smiley, #smiley2, #smiley3{
position:relative;
width:40px;
height:40px;
border-radius:100%;
border:solid #000 2px;
margin-right:10px;
float:right;
}

#smiley {
  background-color:limeGreen;
}
#smiley2{
  background-color:orange;
}
#smiley3{
  background-color:red;
}
#leye{
position:absolute;
left:5px;
top:5px;
width:4px;
height:6px;
background-color:#000;
border-radius:100%;
border:solid #fff 4px;
}
#reye{
position:absolute;
right:5px;
top:5px;
width:4px;
height:6px;
background-color:#000;
border-radius:100%;
border:solid #fff 4px;
 
}
#happy{
position:absolute;
left:25%;
width:55%;
height:35%;
border-radius:100%;
border-bottom:solid 3px #000;
bottom:6px;
}
#neutral{
position:absolute;
left:25%;
width:55%;
height:10%;
border-radius:100%;
border-bottom:solid 3px #000;
bottom:6px;
}
#sad{
position:absolute;
left:25%;
width:55%;
height:35%;
border-radius:100%;
border-top:solid 3px #000;
bottom:0px;
}