<div class="clock-container">
<div id="clock" class="time-display">00:00:00</div>
<div id="date" class="date-display">Mon, Jan 1</div>
</div>
.clock-container {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #111827;
color: #fff;
display: inline-block;
padding: 20px 40px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.time-display {
font-size: 3rem;
font-weight: 700;
letter-spacing: 2px;
font-variant-numeric: tabular-nums;
}
.date-display {
font-size: 1rem;
color: #9ca3af;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 1px;
}
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
document.getElementById("clock").innerText = `${hours}:${minutes}:${seconds}`;
const options = { weekday: "short", month: "short", day: "numeric" };
document.getElementById("dateinnerText").innerText = now.toLocaleDateString("en-US", options);
}
setInterval(updateClock, 1000);
updateClock();
