JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="calendar_clock">
    <ul id="calendar">
        <li id="year1"></li>
        <li id="year2"></li>
        <li id="year3"></li>
        <li id="year4"></li>
        <li class="comma"></li>
        <li id="month1"></li>
        <li id="month2"></li>
        <li class="comma"></li>
        <li id="day1"></li>
        <li id="day2"></li>
        <li id="week"></li>
        
        <li id="hour1"></li>
        <li id="hour2"></li>
        <li class="colon"></li>
        <li id="minute1"></li>
        <li id="minute2"></li>
        <li class="colon"></li>
        <li id="second1"></li>
        <li id="second2"></li>
    </ul>
</div>

CSS

#calendar_clock{
  height:40px;
  width:420px;
  margin: 9px;
}
#calendar_clock li{
  list-style:none;
  display:block;
  height:32px;
  float:left;
}
#calendar_clock li#week{
  list-style:none;
  display:block;
  height:39px;
  float:left;
  width:87px;
  position:relative;
  margin:0 10px 0 6px;
  top:-3px;
}

.comma{
  background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -177px 0;
  width:11px;
}
.colon{
  background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -188px 0;
  width:11px;
}

.none{ display:none; }
.n0{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat 0 0; width:17px; }
.n1{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -17px 0; width:13px; }
.n2{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -31px 0; width:17px; }
.n3{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -50px 0; width:18px; }
.n4{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -68px 0; width:19px; }
.n5{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -88px 0; width:17px; }
.n6{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -105px 0; width:18px; }
.n7{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -123px 0; width:17px; }
.n8{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -141px 0; width:17px; }
.n9{ background:url(http://rettuce.com/src/wonderfl/number.gif) no-repeat -159px 0; width:17px; }

.mon{ background:url(http://rettuce.com/src/wonderfl/week.gif) no-repeat 0 0; }
.tue{ background:url(http://rettuce.com/src/wonderfl/week.gif) no-repeat 0 -39px; }
.wed{ background:url(http://rettuce.com/src/wonderfl/week.gif) no-repeat 0 -78px; }
.thu{ background:url(http://rettuce.com/src/wonderfl/week.gif) no-repeat 0 -117px; }
.fri{ background:url(http://rettuce.com/src/wonderfl/week.gif) no-repeat 0 -156px; }
.sat{...

JavaScript

$(document).ready(
  function (){
    setInterval(update, 1000);    
});

weekArr  = new Array("sun","mon","tue","wed","thu","fri","sat");

function update(){

  myDate   = new Date();
  yearArr  = new Array();
  
  myYear    = myDate.getYear();
  myYear4   = (myYear < 2000) ? myYear+1900 : myYear;
  strYear   = String(myYear4);
  for(var i=0; i<4; i++){
    yearArr.push("n"+strYear.charAt(i));
  }
  if($("#year1").attr("class")!=yearArr[0]) $("#year1").removeClass($("#year1").attr("class")); $("#year1").addClass(yearArr[0]);
  if($("#year2").attr("class")!=yearArr[1]) $("#year2").removeClass($("#year2").attr("class")); $("#year2").addClass(yearArr[1]);
  if($("#year3").attr("class")!=yearArr[2]) $("#year3").removeClass($("#year3").attr("class")); $("#year3").addClass(yearArr[2]);
  if($("#year4").attr("class")!=yearArr[3]) $("#year4").removeClass($("#year4").attr("class")); $("#year4").addClass(yearArr[3]);
  
  myMonth   = myDate.getMonth() + 1;
  monthClass1 = (myMonth < 10) ? "none" : "n"+Math.floor(myMonth/10);
  monthClass2 = "n"+myMonth%10;
  if($("#month1").attr("class")!=monthClass1) $("#month1").removeClass($("#month1").attr("class")); $("#month1").addClass(monthClass1);
  if($("#month2").attr("class")!=monthClass2) $("#month2").removeClass($("#month2").attr("class")); $("#month2").addClass(monthClass2);
  
  myDay     = myDate.getDate();
  dayClass1 = (myDay < 10) ? "none" : "n"+Math.floor(myDay/10);
  dayClass2 = "n"+myDay%10;
  if($("#day1").attr("class")!=dayClass1) $("#day1").removeClass($("#day1").attr("class")); $("#day1").addClass(dayClass1);
  if($("#day2").attr("class")!=dayClass2) $("#day2").removeClass($("#day2").attr("class")); $("#day2").addClass(dayClass2);
  
  myWeek    = myDate.getDay();
  weekClass = weekArr[myWeek];
  if($("#week").attr("class")!=weekClass) $("#week").removeClass($("#week").attr("class")); $("#week").addClass(weekClass);
  
  myHours   = myDate.getHours();
  hourClass1 = "n"+Math.floor(myHours/10);
  hourClass2 =...