JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id='header'>
    <table>
      <tr>
        <!-- dimensions: 100x100 -->
        <td class='background' style='width: 100%'></td>
        <td style='width: 100%'>Application<br>Title</td>
      </tr>
    </table>
  </div>

  <div id='content'>
    <div>content section</div>
    <div id='time'>12:00</div>
  </div>

  <div id='footer'>footer section</div>
</body>

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

table,
tr,
td {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  border-collapse: collapse;
}
.background {
  background-image: url('http://www.clker.com/cliparts/7/K/f/U/4/u/red-circle-small.svg.thumb.png');
  background-size: auto 100%;
  background-repeat: no-repeat;
}
#header {
  height: 20%;
  font-size: 150%;
  font-weight: bold;
  text-align: center;
  background-color: #ff0;
  opacity: .8;
}

#content {
  height: 60%;
  text-align: center;
  background-color: #0ff;
  opacity: .8;
}

#footer {
  height: 20%;
  text-align: center;
  background-color: #0f0;
  opacity: .8;
}

JavaScript

function keepTime() {
  var today = new Date();
  var hh = today.getHours();
  var mm = today.getMinutes();
  var ss = today.getSeconds();
  var AMPM = 'AM';
  if (hh >= 12) {
    hh -= 12;
    AMPM = 'PM';
  }
  if (hh == 0) {
    hh += 12;
  }
  if (mm < 10) {
    mm = '0' + mm;
  }
  if (ss < 10) {
    ss = '0' + ss;
  }
  $('#time').html(hh + ':' + mm + ':' + ss + ' ' + AMPM);
  setTimeout(keepTime, 500);
}

keepTime();