JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo">
  <a href="#">
  <h1><span class="h1a">ABC</span><br><span class="h1b">DEF</span></h1>
  </a>
</div>

CSS

#logo{
  font-family: "arial", "times", "sans-serif";
  width: 128px;
  height: 100%;
  background-color: #336699;
  float: left;
}
#logo a{
  width: 100%;
  height: 100%;
  display: block;
  text-decoration: none;
}
#logo h1{
  margin: 0px;
  padding: 26px 30px;
  text-align: center;
  text-transform: uppercase;
  font-kerning: none;
  display: block;
  color: white;
}
.h1a {
  font-size: 36px;
}
.h1b {
  font-size: 40px;
}