JSFiddle - React, Tailwind, and code Playground

by DemonTut

HTML

<section>
    <div class="animate-log-in">DIV</div>
</section>

<section>
    <!-- change "inline" to "block" and it will start working -->
    <span class="animate-log-in" style="display: block">SPAN</div>
</section>

CSS

section {
  text-align: center;
}

.animate-log-in {
            animation: scaleIn;
    -webkit-animation: scaleIn;
            animation-duration: 1s;
    -webkit-animation-duration: 1s;
            animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
            animation-direction: alternate;
    -webkit-animation-direction: alternate;
}
@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(1);
    }
    to {
        -webkit-transform: scale(1.5);
    }
}
@keyframes scaleIn {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.5);
    }
}