JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clockbox">
    <div id="clockboxtext">
    </div>
</div>

CSS

#clockbox {
  border-width:0.5px;
  border-style:solid;
  border-color:red;
  padding:5px;
  width:210px;
  height:220px;
}

#clockboxtext {
     margin-top:50px;   
    font-family:'Calibri';
        color:#CCCCCC;
    margin-left:5px;
}

#nday {
     font-size:40px;
}

#time {
 font-size:50px;
}
.ap {
    font-size:20px;
}

#date {
    font-size:30px;
}

JavaScript

tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");

function GetClock(){
var d=new Date(+new Date + 12096e5);
var dx=d.toGMTString();
dx=dx.substr(0,dx.length -3);
d.setTime(Date.parse(dx));
d.setSeconds(d.getSeconds() + 0);
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

     if(nhour===0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

if(nyear<1000) nyear+=1900;
if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;
    
var ndayUpper = tday[nday].toUpperCase()

document.getElementById('clockboxtext').innerHTML="<div id='nday'>"+ndayUpper+"</div><div id='time'> "+nhour+":"+nmin+":"+nsec+"<a class='ap'>"+ap+"</a></div><div id='date'>"+tmonth[nmonth]+" "+ndate+", "+nyear+" "+"</div>";
}

window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}