JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clock">
  <p>%h</p>
  <div class="min">
  <span>%m</span><br>
  <span class="visuallyhidden">%s</span>
  <progress value="%~!s" max="59">&nbsp;</progress>
  </div>
  <div class="details">
  <span>%$w,</span>
  <span class="mon">%d.&nbsp;%!$M</span>
  </div>
</div>

CSS

*
{
font-family: 'Segoe WP'; /* change the font accordingly.*/
font-weight: bold;
color: #fff;
}

progress
{
width: 100%;
height: 10px;
border: 0;
position: relative;
bottom: 10px;
background: transparent;
opacity: 0.6;
padding: 0 4px;
margin-top:4px;
}

progress::-webkit-progress-bar
{
background: rgba(230, 230, 230, 0.2);
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

progress::-webkit-progress-value
{
background: #0f0;
border-radius: 3px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.clock
{
width: 170px;
padding: 3px;
text-shadow: 2px 2px rgba(0, 0, 0, 0.3);
}

.clock .min {
width: 45px;
display:block;
float: left;
}

.clock .details {
width: 35px;
display:block;
float:left;
padding-left: 5px;
}

.clock .details span {
font-size: 16px;
color:#FF8000;
text-shadow: 2px 2px 8px #000;
}
.clock .details .mon {
font-size: 22px;
color:#eee;
text-shadow: 2px 2px 10px #000;
}
.clock span
{
font-size: 30px;
opacity: 0.8;
}

.clock p
{
margin: 0 5px 0 0;
text-align: right;
font-size: 50px;
opacity: 0.9;
float:left;
}

.visuallyhidden
{
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}