JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div id="beastainer">
  <img id="beast404le" src="https://developer.cdn.mozilla.net/media/img/beast-404_LE.png" alt="">
  <img id="beast404re" src="https://developer.cdn.mozilla.net/media/img/beast-404_RE.png" alt="">
  <img class="beast 404" src="https://developer.cdn.mozilla.net/media/img/beast-404.png" alt="">
</div>
      
<div id="beastainer">
  <img id="beast404le" class="two" src="https://developer.cdn.mozilla.net/media/img/beast-404_LE.png" alt="">
  <img id="beast404re" class="two" src="https://developer.cdn.mozilla.net/media/img/beast-404_RE.png" alt="">
  <img class="beast 404" src="https://developer.cdn.mozilla.net/media/img/beast-404.png" alt="">
</div>
      
      <div id="beastainer">
  <img id="beast404le" class="t" src="https://developer.cdn.mozilla.net/media/img/beast-404_LE.png" alt="">
  <img id="beast404re" class="t" src="https://developer.cdn.mozilla.net/media/img/beast-404_RE.png" alt="">
  <img class="beast 404" src="https://developer.cdn.mozilla.net/media/img/beast-404.png" alt="">
</div>

CSS

.beast
{
	float: right;
}
ol.prose,ul.prose
{
	list-style-type: disc;
}
ul.prose
{
	margin: 20px 0;
}
.beast
{
	margin: 0;
}
#beastainer
{
	float: right;
	padding: 20px 0 20px 20px;
	position: relative;
}
#beast404le,#beast404re
{
	animation-delay: 1s;
	animation-duration: 7s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	position: absolute;
	webkit-animation-delay: 1s;
	webkit-animation-duration: 7s;
	webkit-animation-iteration-count: infinite;
	webkit-animation-play-state: running;
}
.two {
    animation-delay: .5s !important;
    webkit-animation-delay: .4s !important;
    animation-duration: 1.5s !important;
    webkit-animation-duration: 1.5s !important;
}

.t {
    animation-delay: 1.5s !important;
    webkit-animation-delay: 1.5s !important;
}

#beast404re
{
	animation-name: crazyrighteye;
	left: 231px;
	top: 68px;
	webkit-animation-name: crazyrighteye;
}
#beast404le
{
	animation-name: crazylefteye;
	left: 125px;
	top: 65px;
	webkit-animation-name: crazylefteye;
}
@-webkit-keyframes crazylefteye
{
	0%
	{
		left: 125px;
		top: 65px;
	}
	10%,20%
	{
		left: 118px;
		top: 56px;
	}
	40%
	{
		left: 148px;
		top: 62px;
	}
	50%
	{
		left: 145px;
		top: 72px;
	}
	60%
	{
		left: 121px;
		top: 70px;
	}
	100%,70%
	{
		left: 125px;
		top: 65px;
	}
}
@keyframes crazylefteye
{
	0%
	{
		left: 125px;
		top: 65px;
	}
	10%,20%
	{
		left: 118px;
		top: 56px;
	}
	40%
	{
		left: 148px;
		top: 62px;
	}
	50%
	{
		left: 145px;
		top: 72px;
	}
	60%
	{
		left: 121px;
		top: 70px;
	}
	100%,70%
	{
		left: 125px;
		top: 65px;
	}
}
@-webkit-keyframes crazyrighteye
{
	0%
	{
		left: 231px;
		top: 68px;
	}
	10%,20%
	{
		left: 212px;
		top: 62px;
	}
	40%
	{
		left: 239px;
		top: 64px;
	}
	50%
	{
		left: 240px;
		top: 80px;
	}
	60%
	{
		left: 215px;
		top: 73px;
	}
	100%,70%
	{
		left: 231px;
		top: 68px;
	}
}
@keyframes crazyrighteye
{
	0%
	{
		left: 231px;
		top: 68px;
	}
	10%,20%
	{
		left: 212px;
		top: 62px;
	}
	40%
	{
		left: 239px;
		top:...