JSFiddle - React, Tailwind, and code Playground

HTML

<p>Note with the HTML features</p>
<p> </p>
<p> </p>
<p>1) <strong>Thick horizontal demarcation line</strong> :</p>
<p> </p>
<div style="text-align: center; background-color: #ffcc00;">
<p>thick lines</p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p>2) <strong>Scrollable boxes</strong> :</p>
<div style="overflow: auto; resize: both; width: 320px; height: 110px; border: 1px solid; padding: 3px;">For long texts, very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long texts</div>
<p> </p>
<p> </p>
<p>3) <strong>Tooltips</strong> :   <span class="tooltipzota">Hover-mer<span class="tooltiptextzota">Hidden <span style="color: #ff0000;">text <span style="background-color: #ffff99;">with </span><span style="color: #3366ff;">styling</span> and <a href="zotero://open-pdf/0_GGGG">links</a><br /></span></span></span></p>
<p> </p>
<p> </p>
<p>4) <strong>Tables</strong>:
<table border="1"><caption>Caption</caption>
<tbody>
<tr>
<th colspan="2">A</th>
<th colspan="2">B</th>
<th colspan="2">C</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
<th>1</th>
<th>2</th>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>x</td>
<td>z</td>
<td>x</td>
<td>z</td>
<td>x</td>
<td>z</td>
</tr>
</tbody>
</table>
</p>

<p>5) <strong>Links</strong>:</p>
<p>- link to another <a...

CSS

/******************  Tooltip     **********/
/*   https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip    */

.tooltipzota {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* If you want dots under the hoverable text*/
}

/* Tooltip text */
.tooltipzota .tooltiptextzota {
    visibility: hidden;
    width: 300px;
    max-height: 300px;
    overflow: auto;
    background-color: #c9c9c9;
    text-align: left;
    padding: 5px;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 15px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipzota:hover .tooltiptextzota {
    visibility: visible;
}