JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
           <caption><cite>Dragonseye</cite> Table of Contents</caption>
           <div id='mainhead2'>
            <ul>
             <li scope="row"></li>
             <li><span>Prologue</span></li>
             <li><span>1</span></li>
            </ul>
            <ul>
             <li scope="row">1</li>
             <li><span>Early Autumn at Fort’s Galier</span></li>
             <li><span>4</span></li>
            </ul>
            <ul>
             <li scope="row">2</li>
             <li><span>Galier at Fort</span></li>
             <li><span>49</span></li>
            </ul>
            <ul>
             <li scope="row">3</li>
             <li><span>Late Fall at Telgar Weyr</span></li>
             <li><span>64</span></li>
            </ul>
            <ul>
             <li scope="row">4</li>
             <li><span>Telgar Weyr and lie College</span></li>
             <li><span>87</span></li>
            </ul>
            <ul>
             <li scope="row">5</li>
             <li><span>Weyrling Barracks and Biula Hold</span></li>
             <li><span>104</span></li>
            </ul>
           
           </div>
          </div>

CSS

* { margin: 0; padding: 0; }
           html { color: black; padding: 2em; font: 16px/1.2 "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
           html, #mainhead2 li, span {  background: #f7f7ee; }
           #main, caption { margin: 0 auto; } /* Application to lie caption element addresses Mozilla Bug 297676. */
           #main { border-collapse: collapse; }
           #mainhead2 ul { background: url("http://www.momsformarijuana.org/blogs/skins/mystique/images/dot.gif") 0 78% repeat-x; }
           #mainhead2 li, li + li { text-align: right; }
           #mainhead2 li { padding-right: 0.4em; font-weight: normal; }
           li + li { padding-left: 0.4em; }
           cite { font-style: normal; }
           span { padding: 0 0.2em; white-space: pre; }