JSFiddle - React, Tailwind, and code Playground

by Olayinka Otuniyi

HTML

<div id="something">
Slow Production
</div>

CSS

@keyframes blinker {  
	50% { opacity: 0; }
}

.flashing{
	transition: background-color 0.5s ease-in;
	animation: blinker 1s linear infinite;
}
@keyframes leaves {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(2.0);
    }
}

@keyframes scaling {
From {
    transform: scale(1.0);
}
To {
    transform: scale(2.0);
}

.treeLeaves {
animation: scaling 5s infinite linear;
}

.transformText{
transform: scale(0.8) 0.5s ease-in-out;
	animation: leaves 1s linear infinite;
  font-weight: bold;
}

JavaScript

$("#something").addClass('treeLeaves')