JSFiddle - React, Tailwind, and code Playground
by Sandra Caroline Hansen
HTML
<html>
<head>
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
position: absolute;
top:120px;
left:95px;
}
.abso{
position: absolute;
}
.month{
left:-40px;
white-space: nowrap;
width: 100px;
text-align: right;
}
.blur{
color:transparent;
text-shadow: 0 0 3px rgba(255,255,255,0.3);
}
.cm{
top:20px;
color:white;
}
.pm{
top:0;
}
.nm{
top:40px;
}
.d{
color: white;
left:90px;
top:20px;
}
.pd{
left:90px;
top:0px;
}
.nd{
left:90px;
top:40px;
}
.line{
top:5px;
left:74px;
width: 1px;
height: 45px;
background-color: white;
}
html{background:#393939}
</style>
<body>
<div class="container">
<div class="line abso"></div>
<div id="pmonth" class="abso pm month blur"></div>
<div id="month" class="abso cm month"></div>
<div id="nmonth" class="abso nm month blur"></div>
<div id="pday" class="abso pd blur"></div>
<div id="day" class="abso d"></div>
<div id="nday" class="abso nd blur"></div>
</div>
<script>
(function() {
var dofm, getEL, months, date, curmonth, curyear, curday, pmonth, nmonth, pday, nday;
dofm = function(m, y) {
return new Date(y, m, 0).getDate();
};
getEL = function(el) {
return document.getElementById(el);
};
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
date = new Date();
curmonth = date.getMonth();
curyear = date.getFullYear();
curday = date.getDate();
pmonth = ((curmonth - 1 >= 0) ? curmonth - 1 : 11);
nmonth = ((curmonth + 1 <= 11) ? curmonth + 1 : 0);
pday = ((curday - 1 > 0) ? curday - 1 : dofm(curmonth, curyear));
nday = ((curday + 1 <= dofm(curmonth + 1, curyear)) ? curday + 1 : 1);
getEL('month').innerHTML = months[curmonth];
getEL('pmonth').innerHTML = months[pmonth];
getEL('nmonth').innerHTML = months[nmonth];
getEL('day').innerHTML = curday;
...