JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.1/luxon.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
<div id="day"></div>
<div id="dayn"></div>
<div id="date"></div>
<div class="iline" id="float-cdown"></div>
<div >
<div class="iline" id="count"></div>
 -- 
<div class="iline" id="next"></div>
</div>
<p id="now"></p>

<p id="tomprint"></p>
<div id="twoDays"></div>

CSS

.iline{
  display: inline-block;
}

JavaScript

var tomdat = new Date("2021-8-3")
//var tomdat = new Date()

console.log(tomdat)
// Wed Feb 29 2012 11:00:00 GMT+1100 (EST)

tomdat.setDate(tomdat.getDate() + 1)
console.log(tomdat)
// Thu Mar 01 2012 11:00:00 GMT+1100 (EST)
//monWed.setDate(tomdat.getDate() + 2)
console.log(tomdat.getDate())
var tmwDate =  tomdat.getDate()
tomdat.setDate(tomdat.getDate() + 2)
// this is for monday deadline 2 days away
var mon2days = tomdat.getDate()
console.log(mon2days)
document.getElementById('tomprint').innerHTML = ('tomorrows date: ' + tmwDate)
document.getElementById('twoDays').innerHTML = ('date in 2 days: ' + mon2days)
//reset the date to today
var d = new Date();

// luxon set default timezone
const DateTime = luxon.DateTime;
var utc = DateTime.utc()

var boi = "America/Boise";
var ny = "America/New_York"
var hi = "Pacific/Honolulu"
//luxon.Settings.defaultZone = utc
var def = DateTime.utc().toFormat('HH:mm')
var utcHour = utc.toFormat('HH:mm')
var utcWhere = DateTime.utc().toFormat('z')
var hawaii = DateTime.utc().setZone(hi).toFormat('HH:mm');
var boise = DateTime.utc().setZone(boi).toFormat('HH:mm');
var newYork = DateTime.utc().setZone(ny).toFormat('HH:mm');
var zoneName = DateTime.utc().setZone(boi)
var where = DateTime.utc().setZone(boi).toFormat('z')



// the timer


var tz = new Date().toLocaleString("UTC", {
    timeZone: "America/Boise"
})
console.log({tz})
var iso = new Date().toISOString();
//var isoYear = iso.getFullYear()
var n = d.getDay();
//var hour = d.getHours();
var mm = d.getMinutes()
var dayn = d.getDay()
var dateN = d.getDate()
// today
//console.log({dateN})
var noon = "12:00:00"
//sets the time in the countDown function for all days but mon pre sunrise

var nextAct = {}
const year = d.getFullYear()
const month = d.toLocaleString('default', {
    month: 'long'
});

var times = SunCalc.getTimes(new Date(), 43.5, -115.1);
var sunrise = times.sunrise.getHours().toString().padStart(2, '0') + ':' + times.sunrise.getMinutes().toString().padStart(2,...