JSFiddle - React, Tailwind, and code Playground

CSS

<head>
<style>
@font-face
{
font-family: headerFont;
src:url(/MyWeb/HeadFont/Vermin.otf);
color: white;
margin: 0 auto;
font-weight: bold;
}

body
{
font:"Trebuchet MS", Verdana, sans-serif;
background-color: #f4f4f4;
color: #f04a4a;
margin: 0;
padding: 0;
}

@-webkit-keyframes imageAnimation { 
	0% {
	    opacity: 1;
	    -webkit-animation-timing-function: linear;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: linear;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 1 }
}
@-moz-keyframes imageAnimation { 
	0% {
	    opacity: 0;
	    -moz-animation-timing-function: ease-in;
	}
	8% {
	    opacity: 1;
	    -moz-transform: scale(1.05);
	    -moz-animation-timing-function: ease-out;
	}
	17% {
	    opacity: 1;
	    -moz-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 0;
	    -moz-transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
	0% {
	    opacity: 1;
	    -webkit-animation-timing-function: linear;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: linear;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 1 }
}
@-ms-keyframes imageAnimation { 
	0% {
	    opacity: 1;
	    -webkit-animation-timing-function: linear;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	    -webkit-animation-timing-function: linear;
	}
	17% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	25% {
	    opacity: 1;
	    -webkit-transform: scale(1.1) rotate(3deg);
	}
	100% { opacity: 1 }
}
@keyframes imageAnimation { 
	0% {
	    opacity: 1;
	    -webkit-animation-timing-function: linear;
	}
	8% {
	    opacity: 1;
	    -webkit-transform: scale(1.05);
	   ...