JSFiddle - React, Tailwind, and code Playground

by MarkNahabedian

HTML

<html>
  <body>
    <div class="song">
      <div class="verse">
        <div class="line">
          <div class="word">
            <div class="beat">His</div>
            <div class="beat">t'ry</div>
          </div>
          <div class="word">
            <div class="beat">for</div>
          </div>
          <div class="word">
            <div class="beat">10's</div>
          </div>
          <div class="word">
            <div class="beat">ans</div>
            <div class="beat">wer</div>
          </div>
          <div class="word">
            <div class="beat">is</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

.verse {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
}

.line {
    display: block;
}

.word {
    display: inline;
}

.beat {
    display: inline;
}

.verse .line .beat:nth-of-type(3)
{
    border-width: 1px;
    border-color: yellow;
    border-style: solid;
}