JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"
/>
<link rel="stylesheet" type="text/css" href="https://evotec.xyz/wp-content/uploads/pswritehtml/enlighterjs.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tui-grid.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/af-2.3.2/b-1.5.4/b-colvis-1.5.4/b-html5-1.5.4/b-print-1.5.4/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src="https://evotec.xyz/wp-content/uploads/pswritehtml/enlighterjs.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
<script type="text/javascript" src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<div class="pageTitle"></div>
<div class="ReportCreated">Report created on 2019-02-11 21:20:01</div>
<div>
  <ul class="tab-nav">
    <li><a class="button active" href="#Test">Test </a></li>
    <li><a class="button" href="#Test1">Test1 </a></li>
    <li><a class="button" href="#Test2">Test2 </a></li>
  </ul>
</div>
<div class="tab-content">
  <div...

CSS

* {
  margin: 0px;
  font-family: sans-serif;
  font-size: 8pt;
}
body {
  margin: 8px 10px 8px 10px;
}
h1 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 18pt;
  border-bottom: 2px solid #bbbbbb;
}
h2 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 16pt;
  border-bottom: 2px solid #bbbbbb;
}
h3 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 14pt;
  border-bottom: 1px solid #bbbbbb;
}
h4 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 12pt;
  border-bottom: 1px solid #bbbbbb;
}
h5 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 10pt;
  border-bottom: 1px solid #bbbbbb;
}
h6 {
  margin: 8px 5px 8px 5px;
  font-family: sans-serif;
  font-size: 8pt;
  border-bottom: 1px solid #bbbbbb;
}
h7 {
  font-family: sans-serif;
  font-size: 10pt;
}
hr {
  height: 4px;
  background-color: #007bff;
  border: 0px;
  width: 100%;
}
table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}
th {
  vertical-align: top;
  text-align: left;
  padding: 2px 5px 2px 5px;
}
td {
  vertical-align: top;
  padding: 2px 5px 2px 5px;
  border-top: 1px solid #bbbbbb;
  height: 16px;
  vertical-align: middle;
}
tr.totalrow {
  border-top: thick double;
}
td.totalrow {
  vertical-align: Bottom;
  text-align: left;
  font-size: 8pt;
  font-weight: bold;
  padding: 2px 5px 2px 5px;
}
div.pageTitle {
  font-size: 14pt;
  font-weight: bold;
  width: 100%;
  display: block;
  padding: 4px 1em 0px 2px;
  height: 2em;
}
div.ReportCreated {
  text-align: right;
  padding-right: 5em;
}
div.clientlogo {
  border: 0px;
  vertical-align: middle;
  text-align: left;
  display: inline-block;
  width: 50%;
}
div.MainLogo {
  border: 0px;
  vertical-align: middle;
  text-align: right;
  display: inline-block;
  width: 50%;
}
div.defaultSection {
  border: 1px solid #bbbbbb;
  padding-bottom: 0px;
  display: inline-block;
  margin: 5px;
  width: calc(100% - 10px);
  overflow: hidden;
  /*...

JavaScript

function show(obj) {
  document.getElementById(obj).style.display = "block";
  document.getElementById("hide_" + obj).style.display = "";
  document.getElementById("show_" + obj).style.display = "none";
}
function hide(obj) {
  document.getElementById(obj).style.display = "none";
  document.getElementById("hide_" + obj).style.display = "none";
  document.getElementById("show_" + obj).style.display = "";
}
// Takes a data URI and returns the Data URI corresponding to the resized image at the wanted size.
function resizedataURL(datas, wantedWidth, wantedHeight) {
  // We create an image to receive the Data URI
  var img = document.createElement("img");
  // When the event "onload" is triggered we can resizez the image.
  img.onload = function() {
    // We create a canvas and get its context.
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    // We set the dimensions at the wanted size.
    canvas.width = wantedWidth;
    canvas.height = wantedHeight;
    // We resize the image with the canvas method drawImage();
    ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);
    var dataURI = canvas.toDataURL();
    /////////////////////////////////////////
    // Use and treat your Data URI here !! //
    /////////////////////////////////////////
  };
  // We put the Data URI in the image's src attribute
  img.src = datas;
}
// Use it like that : resizedataURL('yourDataURIHere', 50, 50);
(function() {
  function main() {
    var tabButtons = [].slice.call(
      document.querySelectorAll("ul.tab-nav li a.button")
    );
    tabButtons.map(function(button) {
      button.addEventListener("click", function() {
        document
          .querySelector("li a.active.button")
          .classList.remove("active");
        button.classList.add("active");
        document
          .querySelector(".tab-pane.active")
          .classList.remove("active");
        document
          .querySelector(button.getAttribute("href"))
         ...