JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%" border=0 margin=5>
<tr>
<td width="50%" valign="top">
<div style="width:27px; border-right:1px dashed #cccccc;">

<div class="entry" style="text-align:center; margin-bottom:50px; font-size:19.7px; letter-spacing:.1em;">
AN ENQUIRY CONCERNING THE<br>
PRINCIPLES OF MORALS
</div>

<div class="entry">
<a name="S1"></a>

<div class="centered">
SECTION I.
</div>

<div class="centered" style="margin-top:10px; margin-bottom:10px;">
<strong>of the general principles of morals.</strong>
</div>

<div class="indented numberedlower"><div class="sbnumbered">
<label class="p1">
D<strong>isputes</strong> with men, pertinaciously obstinate in their principles, are, of all others, the most irksome; except, perhaps, those with persons, entirely disingenuous, who really do not believe the opinions they defend, but engage in the controversy, from affectation, from a spirit of opposition, or from a desire of showing wit and ingenuity, superior to the rest of mankind. The same blind adherence to their own arguments is to be expected in both; the same contempt of their antagonists; and the same passionate vehemence, in enforcing sophistry and falsehood. And as reasoning is not the source, whence either disputant derives his tenets; it is in vain to expect, that any logic, which speaks not to the affections, will ever engage him to embrace sounder principles.
</label>
</div></div>

<div class="indented numbered">
<label class="p2">
Those who have denied the reality of moral distinc&shy;tions, may be ranked among the disingenuous disputants; nor is it conceivable, that any human creature could ever seriously believe, that all characters and actions were alike entitled to the<span class="epagno"></span> affection and regard of everyone. The difference, which nature has placed between one man and another, is so wide, and this difference is still so much farther widened, by education, example, and habit, that, where the opposite extremes come at once under our...

CSS

body {
        counter-reset: esdnote 0 etxtnote 0 csdnote 0 ctxtnote 0 epgno 169 cpgno 1 sbn 132 skn 0;}

    strong {font-variant:small-caps; font-weight:normal;}

    .entry {
        counter-reset: pgf 0;
        width: 350px;
        padding-left: 70px;}
    .indented, .unindented {
        position: relative;
        text-align: justify;
        line-height: 1.16em;
        margin: 5px 0 0 0}
    .indented {text-indent:20px;}
    .unindented {text-indent:0px;}
    .numbered:before {
        position: absolute;
        left: -42px;
        width: 40px;
        padding-top: 1px;
        text-align: center;
        text-indent: 0px;
        font-size: 12.8px;
        font-style: normal;
        letter-spacing: normal;
        color: #888888;
        counter-increment: pgf;
        content: counter(pgf);}
    .numberedlower:before {
        position: absolute;
        left: -42px;
        top: 20px;
        width: 40px;
        padding-top: 1px;
        text-align: center;
        text-indent: 0px;
        font-size: 12.8px;
        font-style: normal;
        letter-spacing: normal;
        color: #888888;
        counter-increment: pgf;
        content: counter(pgf);}
    .sbnumbered:before {
        position: absolute;
        left: -37px;
        top: 0px;
        width: 40px;
        padding-top: 1px;
        text-align: center;
        text-indent: 0px;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: normal;
        color: #000000;
        counter-increment: sbn;
        content: counter(sbn);}
    .sknumbered:before {
        position: absolute;
        left: -37px;
        top: 0px;
        width: 40px;
        padding-top: 1px;
        text-align: center;
        text-indent: 0px;
        font-size: 15px;
        font-weight: bold;
        letter-spacing: normal;
        color: #000000;
        counter-increment: skn;
        content: counter(skn);}
    
    .centered {text-align: center; margin-left: 50px; margin-right:...

JavaScript

$(document).ready(function() {
    $("label").mouseenter(function() {
        $label = $(this).attr("class");
        $('.'+$label).addClass("highlight");
    });
    $("label").mouseleave(function() {
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').removeClass("highlight");
    });
    $("label").click(function(event) {
        event.stopPropagation();
        $label = $(this).attr("class");
        $('label[class="'+ $label +'"]').addClass("highlight-click");
    });
    $('html').click(function() {
        $('label').removeClass("highlight-click");       
    });
});