JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/dataTables.bootstrap.min.js"></script>
selected: <span data-bind="text: ko.toJSON(selectedTab)"></span>

<div id="tabs" data-bind="foreach: tabs">
  <div class="tab" data-bind="css: {selected: $parent.selectedTab() == id()}, text: name, click: $parent.selectedTab.bind($parent, id())"></div>
</div>




<div id="tabContent" data-bind="foreach: tabs">
  <div data-bind="if: $parent.selectedTab() == id()">
   
   

    <table class="table table-bordered">
      <thead class="mbhead">
        <tr class="mbrow">
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody data-bind="foreach: items">
        <tr>
          <td>
            <span data-bind="text: id"></span>
          </td>
          <td>
            <span data-bind="text: firstName"></span>
          </td>
          <td>
            <span data-bind="text: lastName"></span>
          </td>
          <td>
            <select class="form-control">
           <option value="">--Select--</option>
           <option value="m">Male</option>
           <option value="f">Female</option>          
         </select>
          </td>
        </tr>
      </tbody>
    </table>

    <br> Table 2

    <table class="table...

CSS

body {
  padding: 10px;
}

#tabs {
  padding: 3px 3px 1px 3px;
}

.tab {
  cursor: default;
  border: 1px solid grey;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 1px 10px 0 10px;
  background: linear-gradient(silver 30%, grey 100%);
  color: white;
  transition: all .25s ease;
  display: inline-block;
  margin-top: 4px;
}

.tab.selected {
  font-weight: bold;
  padding-top: 3px;
  margin-top: 2px;
  background: linear-gradient(white 30%, silver 70%, grey 100%);
  color: black;
}

.tab:hover {
  background: linear-gradient(white 30%, silver 70%, grey 100%);
  color: black;
}

@keyframes bgColor {
  from {
    background: hsl(0, 100%, 99%);
  }
  12% {
    background: hsl(45, 100%, 99%);
  }
  25% {
    background: hsl(90, 100%, 99%);
  }
  37% {
    background: hsl(135, 100%, 99%);
  }
  50% {
    background: hsl(180, 100%, 99%);
  }
  62% {
    background: hsl(225, 100%, 99%);
  }
  75% {
    background: hsl(270, 100%, 99%);
  }
  88% {
    background: hsl(315, 100%, 99%);
  }
  to {
    background: hsl(360, 100%, 99%);
  }
}

JavaScript

(function() {
  var ViewModel = function() {
    var self = this;
    
   

    self.Tab = function(id, name, text, selected) {
      var tab = this;
      tab.id = ko.observable(id);
      tab.name = ko.observable(name);
      tab.text = ko.observable(text);
      tab.templateItems = [{
          id: "1",
          firstName: "Bob",
          lastName: "Hen"
        },
        {
          id: "2",
          firstName: "Henry",
          lastName: "Arman"
        }
      ];
      tab.items = ko.observableArray(self.templateItems.slice()); //create a copy of the template array
      tab.employee = ko.observableArray([]);

      tab.add = function() {
        tab.employee.push(new Employee());
      };

      tab.remove = function(data) {
        tab.employee.remove(data);
      };
      return tab;
    };
    self.selectedTab = ko.observable(1);
    self.tabs = ko.observableArray([]);
    self.tabs.push(new self.Tab(1, 'Tab 1', 'Wecome to Tab #1!'));
    self.tabs.push(new self.Tab(2, 'Tab 2', 'This is Tab 2...'));
    self.tabs.push(new self.Tab(3, 'Tab 3', 'I\'m tab 3'));
    self.tabs.push(new self.Tab(4, 'Tab 4', 'Hello World!'));

    self.Save = function() {
      self.tabs.push(new self.Tab(self.tabs().length+1, 'New Tab', 'dynamically added tab'));
    };
  }

  var Item = function(fname, lname, id) {
    var self = this;

    self.id = ko.observable(id);
    self.firstName = ko.observable(fname);
    self.lastName = ko.observable(lname);
  };
  var Employee = function(pos, sal, dep) {
    var self = this;

  };
  vm = new ViewModel()
  ko.applyBindings(vm);

})();