JSFiddle - React, Tailwind, and code Playground

HTML

<div class="readout" id="now"></div>
<div class="readout" id="midnight"></div>
<!--midnight_local should be X hours different from UTC depending on which time zone
you're in.  For example, it's 4 hours behind UTC because i'm in EST -->
<div class="readout" id="midnight_local"></div>
<!--midnight_utc should be exactly midnight on the current day-->
<div class="readout" id="midnight_utc"></div>

CSS

.readout {
    width: 100%;
    height: 50px;
}

JavaScript

var now = new Date();
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate());
var midnight_utc = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0));
$('#now').html(now.toLocaleString());
$('#midnight').html(midnight.toLocaleString());
$('#midnight_local').html(midnight_utc.toLocaleString());
$('#midnight_utc').html(midnight_utc.toUTCString());