JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<div class="tabset">
          <!-- Tab 1 -->
          <input type="radio" name="tabset" id="tab-listagem" aria-controls="listagem" checked>
          <label for="tab-listagem" id="label-listagem">Listagem</label>
          <!-- Tab 2 -->
          <input type="radio" name="tabset" id="tab-insert" aria-controls="insert" style="display: none;">
          <label for="tab-insert" id="label-insert" style="display: none;">Insert</label>
          <!-- Tab 3 -->
          <input type="radio" name="tabset" id="tab-update" aria-controls="update" style="display: none;">
          <label for="tab-update" id="label-update" style="display: none;">Update</label>

          <input type="radio" name="tabset" id="tab-delete" aria-controls="delete" style="display: none;">
          <label for="tab-delete" id="label-delete" style="display: none;">Delete</label>

          <div class="right">
            <a href="#" class="myButton" onclick="insert_data();">Novo</a>
          </div>

          <div class="tab-panels">
            <div class="tab-panel" id="listagem">
              <p>
                <table id="table">
                  <thead>
                    <tr id="table-header">
                      <th>#</th>
                      <th>teste</th>
                      <th></th>
                    </tr>
                  </thead>

                  <tbody id="table-body">
                  </tbody>
                </table>
              </p>
            </div>

            <div class="tab-panel" id="insert" style="display: none;">
              <p id="form-insert"></p>
            </div>

            <div class="tab-panel" id="update" style="display: none;">
              <p id="form-update"></p>
            </div>

            <div class="tab-panel" id="delete" style="display: none;">
              <p id="form-delete"></p>
            </div>
          </div>
        </div>

CSS

body {
  margin: 0;
  padding: 0;
}

header {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  height: 32px;
}

header a {
  display: inline;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

header a:hover {
  background: #ddd;
  color: black;
}

.left {
  float: left;
}

.right {
  float: right;
}

main {
  margin-top: 30px;
  display: grid;
  grid-template-areas: "aside section section";
  grid-gap: 2px;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

aside {
  grid-area: aside;
  height: 100%;
}

aside ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

aside ul li {
  //
}

aside ul li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

aside ul li a:hover {
  background-color: #555;
  color: white;
}

aside ul li a.active {
  background-color: #4CAF50;
  color: white;
}

section {
  grid-area: section;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 40px;
}

/*
 CSS for the main interaction
*/
.tabset > input[type="radio"] {
  position: absolute;
  left: -200vw;
}

.tabset .tab-panel {
  display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
  display: block;
}

.tabset > label {
  position: relative;
  display: inline-block;
  padding: 15px 15px 25px;
  border: 1px solid transparent;
  border-bottom: 0;
  cursor: pointer;
 ...

JavaScript

function insert_data() {
  if(document.getElementById('tab-insert').style.display === 'none') {
    var url = document.getElementById('insert').dataset.url;

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = this.responseText;

        parser = new DOMParser();
        var doc = parser.parseFromString(myObj, "text/html");
        var form_html = doc.getElementById('form');

        document.getElementById('tab-insert').removeAttribute('style');
        document.getElementById('label-insert').removeAttribute('style');
        document.getElementById('insert').removeAttribute('style');

        document.getElementById('form-insert').innerHtml = form_html;

        document.getElementById('tab-insert').setAttribute('checked', 'checked');
        document.getElementById('tab-listagem').removeAttribute('checked');
      }
    };
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
  }
}