JSFiddle - React, Tailwind, and code Playground

HTML

<div class="play">
      <div class="character">Jeff</div>
      <div direction="Enthusiastic" class="line">This sure is a nice website we've got now.</div>
      <div class="character">Joel</div>
      <div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
      <div class="character">Jeff</div>
      <div class="line">Of course it does. Have you played Rock Band yet?
        <br/>It's a lot of fun.</div>
    </div>

CSS

.play {
      font-family: courier;
    }
    .play{
      margin-top: 1in;
      margin-left: 1.5in;
      margin-right: 1in;
      margin-bottom: 1in;
    }
    .character {
      display: block;
      margin-left: 4in;
      text-transform: uppercase;
    }
    .line[direction]:before{
      margin-left: 2.75in;
      content: "(" attr(direction) ")";
      display: block;
    }
  
    .line {
      margin-bottom: .3in;
    }