JSFiddle - React, Tailwind, and code Playground

HTML

<span class="letter-span-1">XxÀg</span>

<div class="outer">
<span class="letter-span-1">XxÀg</span>
</div>

<div class="outer">
<span class="letter-span-2">XxÀg</span>
</div>

<div class="outer">
<span class="letter-span-3">XxÀg</span>
</div>

CSS

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman"
}

.letter-span-1 {
  background-color: red;
  line-height:40px;
  font-size: 40px;
}

.letter-span-2 {
  background-color: red;
  line-height:15px;
  font-size: 40px;
}

.letter-span-3 {
  background-color: red;
  line-height:65px;
  font-size: 40px;
}