JSFiddle - React, Tailwind, and code Playground

by basiclaser

HTML

<div id="clock">
    <p id="basic">aaa</p>
</div>
<div id="logo" style="width=100%; top:0; right:20px; position:fixed;">
    <p>100basic - it's time</p>
</div>
<div id="hidden" style="margin-top:100%; width=100%; text-align:center;">
    <p>hidden</p>
</div>

CSS

#clock {
    position: absolute;
    display: inline;
    left: 50%;
    right: 50%;
    top: 50%;
    bottom: 50%;
    width: 190px;
    height: 60px;
    margin: auto;
    top: 0;
    bottom: 0;
}

body {  background: black;
        font-family: font-family: 'Exo 2', sans-serif;
        color: white;
        -webkit-font-smoothing: antialiased; 
        -webkit-text-size-adjust: 100%;
}

JavaScript

function updateTime() {
       var currentTime = new Date();
       var hours = currentTime.getHours();
       var minutes = currentTime.getMinutes();
       var seconds = currentTime.getSeconds();
       var hoursB = (hours * 60) * 60;
       var minutesB = minutes * 60;
       var basic = (hoursB + minutesB + seconds) / 864;

       setTimeout("updateTime()", 1000);
       document.getElementById('basic').innerHTML = basic.toFixed(2);
   }
   updateTime();