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>
<br><br>

<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>


<br><br> Table 1

<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: $parent.items">
        <tr>
          <td>
            <span data-bind="text: id"></span>
          </td>
          <td>
            <span data-bind="text: firstName"></span>
          </td>
          <td>
            <input type="text" data-bind="value: 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 table-bordered">
      <thead...

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.selectedTab = ko.observable(1);
    self.tabs = ko.observableArray([]);
    self.tabs.push(new Tab(1, 'Tab 1', 'Wecome to Tab #1!'));
    self.tabs.push(new Tab(2, 'Tab 2', 'This is Tab 2...'));
    self.tabs.push(new Tab(3, 'Tab 3', 'I\'m tab 3'));
    self.tabs.push(new Tab(4, 'Tab 4', 'Hello World!'));


    self.items = ko.observableArray([{
        id: "1",
        firstName: "Bob",
        lastName: "Hen"
      },
      {
        id: "2",
        firstName: "Henry",
        lastName: "Arman"
      }
    ]);

    self.employee = ko.observableArray([]);

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

    self.remove = function(data) {
      self.employee.remove(data);
    };

    self.Save = function() {
      alert('Saved');
    };
    
  }
  
    var Tab = function(id, name, text, selected) {
      var tab = this;
     
      tab.id = ko.observable(id);
      tab.name = ko.observable(name);
      tab.text = ko.observable(text);
      return 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);

})();