JSFiddle - React, Tailwind, and code Playground
HTML
<div id="para1"></div>
CSS
#para1 {
text-align: center;
color: black;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 36pt;
}
JavaScript
document.getElementById("para1").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0' + d.getMinutes() : d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '' + d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
return days[d.getDay()] + ', ' + months[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' ' + hours + ':' + minutes + ampm;
}