JSFiddle - React, Tailwind, and code Playground

HTML

–
<span id="timeH"></span>
<span class="twoPoints">:</span>
<span id="timeM"></span>
<span class="twoPoints">:</span>
<span id="timeS"></span>
&ndash;

CSS

.twoPoints{
    color:red;
    animation: tik-tok 1s infinite linear;
}
@keyframes tik-tok{
    0%{
        opacity: 0.1;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0.1;
    }
}

JavaScript

function time() {
    var today = new Date();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var second = today.getSeconds();

    if (hour < 10) {
        hour = "0" + hour;
    }
    if (minute < 10) {
        minute = "0" + minute;
    }
    if (second < 10) {
        second = "0" + second;
    }

    document.getElementById("timeH").innerHTML = hour;
    document.getElementById("timeM").innerHTML = minute;
    document.getElementById("timeS").innerHTML = second;
}
time();

setInterval(time, 1000);