JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>

	
	


 <link rel="stylesheet" href="highlight.css">
   
	
	<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   
    

    

</head>

<body>
<div class="sidenav">
<div id="demo"></div>
<div id="cat"></div>
</div>



<div class="main">


<div id="content">


</div>

</div>
<script src="highlight.js"></script>
 
 




</body>
</html>

CSS

.sidenav {
    height: 100%;
    width: 240px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
	 background:rgb(186, 204, 190);
    
    overflow-x: hidden;
    padding-top: 20px;
}



.main {
    margin-left: 240px; /* Same as the width of the sidenav */
    font-size: 28px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}
.highlight {
  background-color: yellow;
}
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

JavaScript

data = 
{
  "document" : {
    "title" : "no title",
    "html" : "<?xml version='1.0' encoding='UTF-8' standalone='yes'?><html>\n<head>\n    <meta content=\"text/html; charset=UTF-8\" http-equiv=\"Content-Type\"/><meta content=\"2018-11-20\" name=\"publicationdate\"/><meta content=\"9\" name=\"numPages\"/><title>no title</title><style>/**/\n .TimesNewRomanPSMT_Black_8_0{font-size: 8.0pt; font-family: TimesNewRomanPSMT; color: Black; } .ArialMT_Black_9_0{font-size: 9.0pt; font-family: ArialMT; color: Black; } .TimesNewRomanPS_BoldItalicMT_Black_9_0_bold_italic{font-size: 9.0pt; font-family: TimesNewRomanPS-BoldItalicMT; color: Black; font-weight: bold; font-style: italic;} .TimesNewRomanPS_BoldMT_Black_9_0_bold{font-size: 9.0pt; font-family: TimesNewRomanPS-BoldMT; color: Black; font-weight: bold;} .TimesNewRomanPS_ItalicMT_Black_9_0_italic{font-size: 9.0pt; font-family: TimesNewRomanPS-ItalicMT; color: Black;  font-style: italic;} .TimesNewRomanPSMT_Black_9_0{font-size: 9.0pt; font-family: TimesNewRomanPSMT; color: Black; }\n/**/</style></head>\n<body><section data-level=\"1\" id=\"1\"><p text-alignment=\"center\"><span class=\"title\"><span class=\"TimesNewRomanPS_BoldMT_Black_9_0_bold\"><bbox height=\"4.526819705963135\" page=\"1\" width=\"97.55001831054688\" x=\"259.6099853515625\" y=\"77.3132095336914\">W I T N E S S E T H: </bbox></span></span></p><p text-alignment=\"left\"><span class=\"TimesNewRomanPS_BoldMT_Black_9_0_bold\"><bbox height=\"4.526819705963135\" page=\"1\" width=\"103.5260009765625\" x=\"71.30400085449219\" y=\"102.1731948852539\">IN CONSIDERATION </bbox></span><span class=\"TimesNewRomanPSMT_Black_9_0\"><bbox height=\"16.406824588775635\" page=\"1\" width=\"470.478515625\" x=\"71.78399658203125\" y=\"102.1731948852539\">of the payment of rents and other charges provided for herein and the covenants and conditions hereinafter set forth, Landlord and Tenant hereby covenant and agree as follows: </bbox></span></p></section><section...