JSFiddle - React, Tailwind, and code Playground

by jqnguyen

HTML

<div class="poem-container">
    <div class="poem">
<h1>Sonnet 18</h1>
<ol class="verse">
<li class="stanza">Shall I compare thee to a summer's day?</li>
<li>Thou art more lovely and more temperate.</li>
<li>Rough winds do shake the darling buds of May,</li>
<li>And summer's lease hath all too short a date.</li>
<li class="fallback" value="5">Sometime too hot the eye of heaven shines, (real line 5)</li>
<li>And often is his gold complexion dimmed;</li>
<li>And every fair from fair sometime declines,</li>
<li>By chance, or nature's changing course, untrimmed;</li>
    <li class="nocount stage-dir">Hypothetical Line that Should not be Counted by<br />the Browser (a subheading, stage directions, etc.)</li>
<li class="stanza">But thy eternal summer shall not fade,</li>
<li class="fallback" value="10">Nor lose possession of that fair thou ow'st, (real line 10)</li>
<li>Nor shall death brag thou wand'rest in his shade,</li>
<li>When in eternal lines to Time thou grow'st.</li>
<li>So long as men can breathe, or eyes can see,</li>
<li>So long lives this, and this gives life to thee.</li>
</ol>
</div>
</div>

CSS

div.poem-container { width: 90%; text-align: left; 
    margin: 0 auto; }
div.poem { margin: 0 auto; display: table;  }
.poem h1{ padding-bottom: 1em; text-align: center; }

/* VERSE STYLES */
ol.verse { counter-reset: line; width: auto; margin: 0 auto; font-size: 0.75em; line-height: 1.5; }

ol.verse li { display: block; }

ol.verse li:before { counter-increment: line 1; content: counter(line); width: 2em; display: block; float: left; margin-left: -2em;  }

ol.verse li:not(:nth-child(5n)):before {
   visibility: hidden;   
}

ol.verse li.stanza:not(:first-child) {
  padding-top: 1.5em;
}    

ol.verse li.fallback {
  color: red;
}

ol.verse li.nocount:before {
  visibility: hidden;
}

/* 
ol.verse li.nocount:before {
  display: none;
} */

ol.verse li.nocount {
  color: blue;
  font-style: italic; 
  padding-top: 1.5em;    
}