JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<radialGradient id="shadow_1_" cx="144.2637" cy="407.8379" r="68.2637" gradientTransform="matrix(1.7247 0 0 0.2893 -104.5522 132.1703)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#0E0A33;stop-opacity:0.28"/>
	<stop  offset="1" style="stop-color:#1B1464;stop-opacity:0"/>
</radialGradient>
<ellipse id="shadow" fill="url(#shadow_1_)" cx="144.264" cy="250.169" rx="117.736" ry="19.75"/>
<g id="feet">
	<radialGradient id="left_foot_1_" cx="102.667" cy="223.8389" r="29.8933" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#FFE1BF"/>
	</radialGradient>
	<path id="left_foot" fill="url(#left_foot_1_)" d="M132.159,197.51c0,0-0.221,41.635,0,44.292s6.422,7.086,1.993,7.973
		c-4.43,0.886-44.736,0-56.252,0c-11.516,0-10.63-8.908,0-9.99c10.63-1.083,50.424,4.232,50.424,4.232V197.51H132.159z"/>
	
		<radialGradient id="right_foot_1_" cx="-32.8789" cy="223.8389" r="29.8931" gradientTransform="matrix(-1 0 0 1 153.9453 0)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#FFE1BF"/>
	</radialGradient>
	<path id="right_foot" fill="url(#right_foot_1_)" d="M157.333,197.51c0,0,0.222,41.635,0,44.292s-6.422,7.086-1.993,7.973
		c4.429,0.886,44.736,0,56.251,0c11.517,0,10.631-8.908,0-9.99c-10.63-1.083-50.424,4.232-50.424,4.232V197.51H157.333z"/>
</g>
<g id="body">
	<radialGradient id="right_arm_1_" cx="241.8438" cy="110.0259" r="43.8999" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#FFFFFF"/>
		<stop  offset="1" style="stop-color:#FFE1BF"/>
	</radialGradient>
	<path id="right_arm" fill="url(#right_arm_1_)"...

SCSS

body {
    background: tomato;
	text-align:center;
}

#mouth {
	transform-origin: 150px 108px;
	transform:scaleY(0);
}
@keyframes bounce {
    0% {
        transform: scaleY(0)
    }
    20% {
        transform: scaleY(1)
    }
    30% {
        transform: scaleY(0)
    }
    40% {
        transform: scaleY(.3)
    }
    50% {
        transform: scaleY(0)
    }
    60% {
        transform: scaleY(.3)
    }
    100% {
        transform: scaleY(0)
    }
}

@keyframes arm {
    0% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(50deg)
    }
    100% {
        transform: rotate(0)
    }
}

@keyframes arm2 {
    0% {
        transform: rotate(0)
    }
    50% {
        transform: rotate(-50deg)
    }
    100% {
        transform: rotate(0)
    }
}

@keyframes fly {
	0% {transform:translateY(0)}
	50% {transform:translateY(15px)}
	100% {transform:translateY(0)}
}

@keyframes shadow {
	0% {transform:translateY(15px) scale(.8); opacity:.6;}
	50% {transform:translateY(0px) scale(1); opacity:1;}
	100% {transform:translateY(15px) scale(.8); opacity:.6;}
}

@keyframes leftfoot {
	0% {transform:rotate(-10deg);}
	50% {transform:rotate(0deg);}
	100% {transform:rotate(-10deg);}
}

@keyframes rightfoot {
	0% {transform:rotate(10deg);}
	50% {transform:rotate(0deg);}
	100% {transform:rotate(10deg);}
}


#left_foot {
	transform-origin:129px 222px;
	animation:leftfoot .5s infinite;
}

#right_foot {
		transform-origin:158px 222px;
	animation:rightfoot .5s infinite;
}

svg {
	animation:fly .5s infinite;
}

#shadow {
	transform-origin:150px 250px;
	animation:shadow .5s infinite;
}

    #right_arm {
        transform-origin: 200px 150px;
        animation: arm .2s infinite;
    }
    #left_arm {
        transform-origin: 100px 150px;
        animation: arm2 .2s infinite;
    }
    #mouth {
        position: relative;
        animation: bounce 1s infinite;
    }