JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="container">
  <div class="row" style="margin-top: 12px">
    <div class="col-md-12">




      <div class="btn-toolbar">
        <div class="btn-group">

          <a href="javascript:void" class="btn btn-primary">
            <span class="fa-layers fa-fw">
              <i class="fa-solid fa-calendar"></i>
              <span id="date" class="fa-layers-text text-primary" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
            </span>
          </a>

          <a href="javascript:void" class="btn btn-primary" data-toggle="tooltip" title="Inbox (12 unread)">
            <span class="fa-layers fa-fw" style="">
              <i class="fa-solid fa-envelope"></i>
              <span id="letters" class="fa-layers-counter" style="font-size: 1.5em">12</span>
            </span>
          </a>
        </div>

      </div>
      <hr />
      <div class="row">
        <div class="col-sm-3">
          <small>

            <strong>From</strong>
          </small>
          <div class="col-sm-9">
            <small>
              Joe Smith ([email protected])
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  font-size: 30px;
  font-family: system-ui;
}

JavaScript

function getTime() {
	return new Date();
}

var d = 27;

$(document).ready(function(){
setInterval(function() {
	var s = new Date().getSeconds();
  d += 1;
  if (d > 31) {
  	d = 1;
  }
  $('#date').text(d)
  $('#letters').text(s + 7);
}, 100);

});