JSFiddle - React, Tailwind, and code Playground

by TigerAsks

HTML

<span>Hakuna Matata</span><br/>
<div class = container>
<span class="mono">H</span><span class="mono">a</span><span class="mono">k</span><span class="mono">u</span><span class="mono">n</span><span class="mono">a</span><span class="mono"> </span><span class="mono">M</span><span class="mono">a</span><span class="mono">t</span><span class="mono">a</span><span class="mono">t</span><span class="mono">a</span></div>

CSS

*{
  --character-padding: .3em;
}

.mono {
  font-family: monospace, monospace;
  padding-left: var(--character-padding);
  padding-right: var(--character-padding);
}

.mono:nth-child(2n) {
  color: white;
  background-color: red;
}
.mono:nth-child(2n+1) {
  color: blue;
  background-color: yellow;
}