HTML Code

<p>Today Is</p>
<div class="calender">
<div class="top">
<span id="months">January</span>
</div>

<span id="days">Saterday</span>
<span id="dates">01</span>
<span id="years">2020</span>
</div>
<p class="time-title">TIME NOW</p>

<div class="time">
    <div id="hours">00</div>
    <div id="minutes">00</div>
    <div id="seconds">00</div>
    <div id="ampm">00</div>
</div>

CSS Code:

body{
  background-color: #f5f5f7;
  color: #232323;
  height:100vh;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align:center;
}
p{
  font-weight: 700;
  text-transform: uppercase;
  color: #FB3333;
}
.calender{
  width: 200px;
  height: 200px;
  background-color: #FAC893;
  border-radius: 10%;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.top{
  width: 100%;
  height: 50px;
  background-color: #FB3333;
  align-items: center;
  justify-content: center;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
#months{
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}
#days{
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  padding-top: 50px;
}
#dates{
  font-size: 5rem;
  font-weight: 700;
}
#years{
  font-size: 1.5rem;
  font-weight: 900;
}
.time-title{
  background-color: #FB3333;
  border-radius: 30px;
  color: #fff;
  padding: 5px 10px;
  margin: 5px;
}
.time{
  display: flex;
  gap: 10px;
  font-weight: 700;
}

JavaScript Code:

setInterval(() => {
  const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];

  // Day
  let months = document.getElementById("months");
  let days = document.getElementById("days");
  let dates = document.getElementById("dates");
  let years = document.getElementById("years");

  // time
  let hours = document.getElementById("hours");
  let minutes = document.getElementById("minutes");
  let seconds = document.getElementById("seconds");
  let ampm = document.getElementById("ampm");

  //Date
  let ma = month[new Date().getMonth()];
  let dy = weekday[new Date().getUTCDay()];
  let dt = new Date().getDate();
  let yr = new Date().getFullYear();

  //time
  let h = new Date().getHours();
  let m = new Date().getMinutes();
  let s = new Date().getSeconds();
  let am = h >= 12 ? "PM" : "AM";


  //convart time 12 hours
  if (h > 12){
    h = h - 12;
  }

  // add zero
  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;
  dt = (dt < 10) ? "0" + dt : dt;

  // date
  months.innerHTML = ma;
  days.innerHTML = dy;
  dates.innerHTML = dt;
  years.innerHTML = yr;

  // time
  hours.innerHTML = h;
  minutes.innerHTML = m;
  seconds.innerHTML = s;
  ampm.innerHTML = am;
})

Preview: