JSFiddle - React, Tailwind, and code Playground

HTML

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Отработка</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
        ul.topmenu{color:blue; background: silver;width:90%;border:1px solid #f00;}
        ul.topmenu li{display:inline; margin-left: 10px;padding-left:2px;padding-right:2px;border:1px solid #f00;}
        b *:hover {color: red; background: yellow;}
        a:link {color: black;}
        ul.menu {color:blue; background: silver; width: 150; height: 18%;}
        body *:hover, p:hover, h1:hover, h2:hover, ul:hover, ol:hover,li:hover {background:rgb(134,220,010)}
        a:visited {color: black;}
        a:hover {color:red; background:blue;}
        p {font-size: 20pt;}
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                    <h1 id="heddoc">То что нужно знать при оформлении страничек.</h2>
                    <h2>Навигация по страничке:</h2>
                    <ul class="topmenu" font-color:red>
                        <li><a href="#headers">Виды заголовков</a></li>
                        <li><a href="#lists">Списки</a></li>
                        <li><a href="#links">Ссылки</a></li>
                        <li><a href="#tables">Таблицы</a></li>
                        <li><a href="#pict">Изображения</a></li>
                    </ul>
                    <p>
                        <a href="#heddoc">Наверх</a>
                    </p>
                    <h2 id="headers">Виды заголовков:</h2>
                    <h1>Первый заголовок</h1>
                    <h2>Второй заголовок</h2>
                    <p>
                        ...
                    </p>
                    <h6>Последний шестой заголовок</h6>
                    <p>
                        Таким образом мы видим что есть 6 типов заголовков<br>но смысла...