JSFiddle - React, Tailwind, and code Playground

HTML

<span id="timer"></span>

<div class="pulse">❤</div>

CSS

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(2);
        transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.pulse {
    -webkit-animation-name: pulse;
    -webkit-animation-duration: 10s;
    -webkit-animation-delay: 1s;
    -webkit-animation-iteration-count: 2;
    position: absolute;
    left: 50%;
    font-size: 50px;
    top: 10%;
}

JavaScript

var count = 20;

var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {
    count = count - 1;
    if (count <= 0) {
        clearInterval(counter);
        return;
    }

    document.getElementById("timer").innerHTML = count + " secs"; // watch for spelling
}