JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="400" width="400">
<circle cx="200" cy="200" r="150" fill="purple" id="face"/>
<polygon points="100,90,150,60,100,20" fill="pink"/>
<polygon points="300,90,250,60,300,20" fill="pink"/>
<circle cx="200" cy="150" r="50" fill="white" id="Eye"/>
<circle cx="200" cy="170" r="20" fill="black" id="Eyeball"/>
<path fill="black" stroke="black" stoke-width="2" d="M100,250,q 100,100,200,0 z" />
<path fill="red" fill-opacity="0.01" d="M 170,270 q 70,50 70,0 z" id="Tongue"/>

<polygon points="130,250,150,250,140,280" fill="white"/>
<polygon points="240,250,260,250,250,280" fill="white"/>

<line x1="160" x2="240" y1="150" y2="150" stroke-width="8" stroke="black" stroke-opacity="0.01" stroke-linecap="round" id="Blink1"/> 
<line x1="160" x2="220" y1="150" y2="130" stroke-width="8" stroke="black" stroke-opacity="0.01" stroke-linecap="round" id="Blink2"/> 
<line x1="160" x2="220" y1="150" y2="170" stroke-width="8" stroke="black" stroke-opacity="0.01" stroke-linecap="round" id="Blink3"/> 

</svg>

<p>I am Mike Chlogawski</p>

JavaScript

var shape = $("#Tongue");
window.setInterval( function() {
shape.attr("fill-opacity","100");
}, 3000);

var shape2 = $("#Eye");
window.setInterval( function() {
shape2.attr("fill","purple");
}, 2000);

var shape3 = $("#Eyeball");
window.setInterval( function() {
shape3.attr("fill","purple");
}, 2000);

//var shape7 = $("#blinkTotal");
//shape7.click( function() {
//shape7.attr("stroke-opacity","100");});

var shape4 = $("#Blink1");
window.setInterval( function() {
shape4.attr("stroke-opacity","100");
}, 2000);

var shape5 = $("#Blink2");
window.setInterval( function() {
shape5.attr("stroke-opacity","100");
}, 2000);

var shape6 = $("#Blink3");
window.setInterval( function() {
shape6.attr("stroke-opacity","100");
}, 2000);

//var shape4 = $("#Blink");
//shape4.click( if(isShapeVisible == true){
//	shape4.attr("fill", "black")
//isShapeVisible = false;
//} else {
//	shape4.attr("fill", "black")
//  isShapeVisible = true;
//}