JSFiddle - React, Tailwind, and code Playground

HTML

<html><head>
    <style>
      td {border: 1px solid black;
          padding:0.5em}
      
    </style>
  </head>
  <body>
    <p>
      <button id="publish" onclick="publish_contract()" disabled="">Publish contract</button>
      <span id="address">Contract address : 0x8d1db117a1b0389e45822c3917992b9ad03b018d</span>
    </p>
    <p>
      <button id="test" onclick="test_contract(false)" style="">Run tests</button>
      <button id="generative_test" onclick="test_contract(true)" style="">Run generative tests</button>
      <table id="test_table">
        <tbody>
        <tr style="border: 1px solid black"><td>insert(5)</td><td>=</td><td>null</td><td></td><td><pre>{
    "value": 0,
    "dupes": 0,
    "right": {
        "value": 5,
        "dupes": 0,
        "side": "right",
        "parent": 0,
        "height": 1,
        "count": 1
    }
}</pre></td></tr><tr style="border: 1px solid black"><td>percentile(5)</td><td>=</td><td>50</td><td><span class="passed" style="color:green">passed</span></td><td><pre>{
    "value": 0,
    "dupes": 0,
    "right": {
        "value": 5,
        "dupes": 0,
        "side": "right",
        "parent": 0,
        "height": 1,
        "count": 1
    }
}</pre></td></tr><tr style="border: 1px solid black"><td>remove(5)</td><td>=</td><td>null</td><td></td><td><pre>{
    "value": 0,
    "dupes": 0
}</pre></td></tr><tr style="border: 1px solid black"><td>insert(5)</td><td>=</td><td>null</td><td></td><td><pre>{
    "value": 0,
    "dupes": 0,
    "right": {
        "value": 5,
        "dupes": 0,
        "side": "right",
        "parent": 0,
        "height": 1,
        "count": 1
    }
}</pre></td></tr><tr style="border: 1px solid black"><td>rank(5)</td><td>=</td><td>0</td><td><span class="passed" style="color:green">passed</span></td><td><pre>{
    "value": 0,
    "dupes": 0,
    "right": {
        "value": 5,
        "dupes": 0,
        "side": "right",
        "parent": 0,
        "height": 1,
        "count": 1
   ...