JSFiddle - React, Tailwind, and code Playground

by jsfiddle_account1111

HTML

<!DOCTYPE html>
<html>

  <head lang="en">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
    <script defer src="https://use.fontawesome.com/releases/v5.8.2/js/all.js" integrity="sha384-DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH" crossorigin="anonymous"></script>
  </head>
  <div class="row mx-3">
    <div class="col my-3">
      <ul class="nav nav-tabs" id="lefttabs" role="tablist">
        <li class="nav-item">
          <a id="doc-tab" class="nav-link active" data-toggle="tab" href="#doc" role="tab" data-height="true">gsdfgsfg</a>
        </li>
        <li class="nav-item">
          <a id="stories-tab" class="nav-link" data-toggle="tab" href="#stories" role="tab" data-height="true">htrhr</a>
        </li>
      </ul>
    </div>
    <div class="col my-3 d-flex justify-content-end">
      <ul class="nav" id="righttabs">
        <li class="nav-item">
          <!-- <a class="nav-link" href="#"><input type="file" id="openfile" /></a> -->
          <div class="input-group">
            <div class="custom-file">
              <input type="file" class="custom-file-input" id="file">
              <label class="custom-file-label" for="file">Choose file</label>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <body id="table">
    <div id="tablebody" class="tab-content my-2 mx-3">
      <div class="tab-pane fade show active" id="doc" role="tabpanel">
        <div class="d-inline-flex">
          <table class="table table-hover table-hover-cells table-borderless mt-2 text-secondary">
            <thead class="text-dark">
              <tr>
                <th scope="col"></th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
                <th scope="col"><i class="fas fa-plus"></i></th>
              </tr>
            </thead>
            <tbody>
              <tr>
     ...

JavaScript

document.querySelector('#file').addEventListener('change', function() {
  var ready = false;
  var content = [];
  var table = document.querySelectorAll('td');
  var tabs = document.querySelector('#lefttabs');
  var tablebody = document.querySelector('#tablebody');
  var fr = new FileReader();
  fr.readAsText(this.files[0]);
  var check = function() {
    if (ready === true) {
      const schemas = content.data.tableSchemas;
      while (tabs.firstChild) {
        tabs.removeChild(tabs.firstChild);
      }
      while (tablebody.firstChild) {
        tablebody.removeChild(tablebody.firstChild);
      }
      for (var i = 0; i < schemas.length; i++) {
        var navitem = document.createElement('li');
        navitem.className = 'nav-item';
        var tabname = document.createElement('a');
        tabname.setAttribute('id', schemas[i].id + '-tab');
        tabname.className = 'nav-link' + (!i ? ' active' : '');
        tabname.setAttribute('data-toggle', 'tab');
        tabname.setAttribute('href', '#' + schemas[i].id);
        tabname.setAttribute('role', 'tab');
        tabname.setAttribute('data-height', 'true');
        tabname.textContent = schemas[i].name;
        navitem.appendChild(tabname);
        tabs.appendChild(navitem);

        var tab = document.createElement('div');
        tab.setAttribute('id', schemas[i].id);
        tab.className = 'tab-pane fade' + (!i ? ' show active' : '');
        tab.setAttribute('role', 'tabpanel');
        var flex = document.createElement('div');
        flex.className = 'd-inline-flex';
        var grid = document.createElement('table');
        grid.className = 'table table-hover table-hover-cells';
        grid.className += ' table-borderless mt-2 text-secondary';
        grid.textContent = schemas[i].name;
        flex.appendChild(grid);
        tab.appendChild(flex);
        tablebody.appendChild(tab);

      }
      return;
    }
    setTimeout(check, 1000);
  }
  check();
  fr.onload = function() {
    content...