JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left">
  <p id="time">
    12:03<span>45</span>
  </p>
  <div id="hvcenterme">
     <p>
       Another Paragraph centered both ways.
     </p>
  </div>
  <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: 100vh;
  display:flex;
  flex-direction:column;
  padding: 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
}

#time {
  flex:0 0 auto;
  margin:0;
  font-size: 90pt;
}

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

#hvcenterme {
   flex:1 0 auto;
   margin:0;
   width:100%;
   display:flex;
   background:Green;
}

#hvcenterme p {
  flex:1 0 100%;
  line-height:1.5em;
  margin:0;
  text-align:center;
  align-self:center;
  background:Blue;
}

#currentWeather {
  flex:0 0 auto;
  font-size: 84pt;
  margin:0 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;
}