JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<div class="row">
<div class='panel-body'>
  <p>First name: <strong data-bind="text: firstName"></strong></p>
  <p>Last name: <strong data-bind="text: lastName"></strong></p>
  <p>First name:
    <input data-bind="value: firstName, event: { keyup: updateFirstName }" />
    <label>&nbsp;Change First name</label>
  </p>
  <p>Last name:
    <input data-bind="value: lastName" />
  </p>
  <p>Full name: <strong data-bind="text: fullName"></strong></p>
  <p>
    <label for="ddl-status">My Status: </label>
    <select id="ddl-status" name="ddl-status" data-bind="foreach: Status, value:selectedStatus">
      <option data-bind="attr: { title:value }, text:abbrev, value:id"></option>
    </select>&nbsp;
    <span data-bind="text: 'id: '+$root.selectedStatus()+' val: '+$root.selectedStatusIndex()"></span>
  </p>
  <p>
  <ol data-bind="template: { name: 'rowTmpl', foreach: Status }"></ol>
  <script id="rowTmpl" type="text/html">
		<li data-bind="text: abbrev + ' - ' + value"></li>
	</script>
  </p>
</div>
</div>
<div class="row">
  <div class="col-sm-6 col-xs-6">
    <div class="tabbable" id="ref-tables" style="min-height:800px; margin-top:10px;">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Divisions</a></li>
    <li><a href="#tab2" data-toggle="tab">Networks</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <div class="panel panel-default">
 		<div class="panel-body">
          <table class="table table-bordered table-codensed table-hover table-striped" style="width:100%; margin:0;">
            <thead><tr><th...

CSS

/* CSS used here will be applied after bootstrap.css */
#ref-tables div.tab-content > div.tab-pane {
	min-height: 800px;
}

.tab-pane > .panel {
  min-height: 400px;
	border-top: 0;
}
.active:not() > a {
	border:1px solid silver;
  background-color:red;
}

JavaScript

// simple ko keyup event
// simple ko filter of select
// bootstrap tabs
//https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
//https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
//https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js

function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);
  this.updateFirstName = function(data, event) {
    data.firstName(event.target.value);
    return true;
  };
  this.Status = ko.observableArray([{
    value: "",
    abbrev: "",
    id: "0"
  }, {
    value: "Arrives After 0900 (Convert to PFD upon arrival)",
    abbrev: "AAN",
    id: "1"
  }, {
    value: "At Alternate Site",
    abbrev: "AAS",
    id: "2"
  }, {
    value: "Administrative Leave",
    abbrev: "ADM",
    id: "3"
  }, {
    value: "Delayed Commute (Convert to PFD upon arrival)",
    abbrev: "D",
    id: "4"
  }, {
    value: "Furlough",
    abbrev: "FL",
    id: "5"
  }, {
    value: "Government Lead",
    abbrev: "GL",
    id: "6"
  }, {
    value: "Holiday",
    abbrev: "H ",
    id: "7"
  }, {
    value: "In Processing",
    abbrev: "IP",
    id: "8"
  }, {
    value: "Leave",
    abbrev: "L",
    id: "9"
  }, {
    value: "Off Shift / RDO",
    abbrev: "O",
    id: "10"
  }, {
    value: "Out Processing",
    abbrev: "OP",
    id: "11"
  }, {
    value: "Pass",
    abbrev: "P",
    id: "12"
  }, {
    value: "Present For Duty",
    abbrev: "PFD",
    id: "13"
  }, {
    value: "Present For Duty - Government Lead",
    abbrev: "PFD-GL",
    id: "14"
  }, {
    value: "Quarters",
    abbrev: "Qtrs",
    id: "15"
  }, {
    value: "Sick",
    abbrev: "SL",
    id: "16"
  }, {
    value: "Temporary Duty",
    abbrev: "TDY",
    id: "17"
  }, {
    value: "Training / School",
    abbrev: "Trng",
    id: "18"
  }]);
  this.selectedStatus =...