JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<div class="poem-container">
    <div class="poem">
        <h1>Sonnet 18</h1>
        <menu 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>
                <ol><li class="nocount stage-dir">Hypothetical Line that Should not be Counted by<br />the Browser (a subheading, stage directions, etc.)</li></ol>
            <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>
        </menu>
    </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 */
menu.verse { 
    counter-reset: line; 
    width: auto; 
    margin: 0 auto; 
    font-size: 0.75em; 
    line-height: 1.5; 
}

menu.verse li { display: block; }

menu.verse > li { counter-increment: line 1;}

menu.verse > li:nth-of-type(5n):before {
    content: counter(line); 
    width: 2em; 
    display: block; 
    float: left; 
    margin-left: -2em;  
}

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

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

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

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