JSFiddle - React, Tailwind, and code Playground

HTML

<div class="play">
      <div class="character">Jeff</div>
      <div class="direction">JEFF is enthusiastic!</div>
      <div class="line">This sure is a nice website we've got now.</div>
      <div class="character">Joel</div>
      <div class="direction">Jumping continuously</div>
      <div 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;
    }
    .direction:before{
      margin-left: 2.75in;
      content: "(";
    }
    .direction:after{
      content: ")";
    }
    .line {
      margin-bottom: .3in;
    }