JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
  <p id="time">
    12:03<span>45</span>
  </p>
  <p id="currentWeather">
    <!-- <i class="wi wi-{{currentConditions}}"></i> -->
    <!-- have used image for placeholder to avoid uploading font -->
    <img src="http://findicons.com/files/icons/2603/weezle/256/weezle_sun.png"><span>32</span>
  </p>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Roboto", Helvetica, sans-serif;
}

#left {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  max-height: 100%;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}

#time {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  font-size: 90pt;
}

#time > span {
  margin-left: 6px;
  font-size: 24pt;
}

#currentWeather {
  position: relative;
  top: 50%;
  left: 0;
  font-size: 84pt;
  margin: auto;
}

#currentWeather > span {
  display: block;
  font-size: 40pt;
}

/* this is just a placeholder. real image is dynamic and won't have set height */
img {
  width: 124px;
  height: 112px;
}