JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix">
  <a href="#" id="prob">Link</a>
</div>

CSS

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/*================================*/

html {
    font-size: 62.5%;
}

div {
  background: grey;
  padding: 25px 0;
}

a {
  text-decoration: none;
}

#prob {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
  font-style: italic;
  font-size: 6rem;
  display: inline-block;
  background: rgba(0,0,0,.2);
  color: red;
  float: left;
}
#prob:after{
  content: '\00a0';
  font-size: 18pt;
}

#prob:hover {
	color: blue;
}