JSFiddle - React, Tailwind, and code Playground

by grant

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/suncalc/1.8.0/suncalc.min.js"></script>
<div  class="legend">


<div class="twilight" id="dawn"></div>
<div class="sunrise" id="sunrise"></div>
<div class="sunset"  id="sunset"></div>
<div class="twilight" id="dusk"></div>
</div>

CSS

.legend {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.875em;
    position: absolute;
    z-index: 1000;
    padding: 4px 7px 5px;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    border-right: 2px solid #444;
    border-bottom: 2px solid #444;
    
    
    background: white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.sunrise, .sun, .twilight .sunset {
    padding: 0px 4px 1px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}
.twilight {
    background: #d0e5ff;
    padding: 0px 4px 1px;
    margin: 4px 0px 0px 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
.sunrise {
    background: #FFED9E;
    padding: 0px 4px 1px;
    margin: 4px 0px 0px 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.sunset {
    background: #FFC3AD;
    padding: 0px 4px 1px;
    margin: 4px 0px 0px 0px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.twilight {
    background: #d0e5ff;
    padding: 0px 4px 1px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.sunrise, #welcome .sun, #welcome .sunset {
    padding: 0px 4px 1px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

JavaScript

// get the sunrise for boise with sunCalc.js
var times = SunCalc.getTimes(new Date(), 43.5, -115.1);
var dawn = times.dawn.getHours().toString().padStart(2, '0') + ':' + times.dawn.getMinutes().toString().padStart(2, '0')
var sunRise = times.sunrise.getHours().toString().padStart(2, '0') + ':' + times.sunrise.getMinutes().toString().padStart(2, '0');
var sunSet = times.sunset.getHours().toString().padStart(2, '0') + ':' + times.sunset.getMinutes().toString().padStart(2, '0')
var dusk = times.dusk.getHours().toString().padStart(2, '0') + ':' + times.dusk.getMinutes().toString().padStart(2, '0')

// javascript date set to users computer
//var day = new Date();

var dw = document.getElementById('dawn');
var sr = document.getElementById('sunrise');
var ss = document.getElementById('sunset');
var dsk = document.getElementById('dusk');

dw.innerHTML = ('Dawn: ' + dawn)
sr.innerHTML = ('Sunrise: ' + sunRise)
ss.innerHTML = ('Sunset: ' + sunSet)
dsk.innerHTML = ('Dusk: ' + dusk)