JSFiddle - React, Tailwind, and code Playground

by David Underwood

HTML

<script src="https://app.aeshield.com/Resources/Shared/Scripts/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="https://training.aeshield.com/js/bootstrap-select.js"></script>
<link rel="stylesheet" href="https://training.aeshield.com/css/bootstrap-select.css">
<script src="https://use.fontawesome.com/9878de461d.js"></script>
<div id="validationContainer">
  <div id="validationHeader">
    <div id="validationItemSelector">
      <select id="validationItems" class="selectpicker" data-live-search="true" data-show-subtext="true">
      <optgroup label="Assembly Groups">
        <option data-subtext="Assembly Group">AssemblyGroup1</option>
        <option data-subtext="Assembly Group">6584-S-Tag-1 UNDEF, 1oo1</option>
      </optgroup>
      <optgroup label="Assemblies">
         <option data-subtext="Assembly">6584-S-Tag-1</option>
         <option data-subtext="Assembly">6584-S-Tag-2</option>
      </optgroup>
      <optgroup label="Components">
        <option data-subtext="Component">6584-S-Tag-1</option>
        <option data-subtext="Component">6584-S-Tag-2</option>
      </optgroup>
      <optgroup label="Logic Solvers">
        <option data-subtext="Logic Solver">LS1</option>
        <option data-subtext="Logic Solver">LS2</option>
        <option data-subtext="Logic Solver">LS3</option>
      </optgroup>
      </select>
    </div>
    <div id="validationRefresh">
      <i class="fa fa-refresh" aria-hidden="true"></i>
    </div>
  </div>
  <div id="validationBody">
    <!--<div id="validationSuccess">
      <span class="fa-stack fa-lg successicon">
        <i class="fa fa-check fa-stack-1x"></i>
        <i class="fa fa-circle-thin fa-stack-2x" aria-hidden="true"></i>
      </span>
      <h1>No Issues</h1>
      <p>No problems here</p>
    </div> -->
   ...

CSS

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width:100%;
}
.tab-pane {
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  padding: 8px;
  height: 100%;
}
#validationSuccess { 
  text-align: center;
}
  #validationSuccess .successicon {
    font-size: 100px;
  }
  #validationSuccess .successicon .fa-check { color: #5FB85A; }
  #validationSuccess .successicon .fa-circle-thin { color: #B4D7B2; }

#validationContainer {}
#validationHeader {
  position: fixed;
  top: 0;
  height: 50px;
  padding: 8px;
  width: 100%;
  background-color: #ffffff;
  z-index: 1;
}
  #validationItemSelector {
    float: left;
    text-align: left;
    width: 95%;
  }
  #validationRefresh {
    float: right;
    text-align: right;
    width: 5%;
    font-size: 24px;
  }
#validationBody {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
  background-color:#ffffff;
  overflow: auto;
  padding: 10px;
}

#validationFooter {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  background-color: #ffffff;
  padding: 15px 20px 20px 20px;
}
  #validationCounts { float: left; }
    #validationCounts .fa-eraser { color: red; }
    #validationCounts .counterblock { float: left; padding-right: 10px; font-weight: bold; }
    #validationCounts .warn { color: #EE9401; }
    #validationCounts .error { color: red; }
    
  #validationControlButtons {
    float: right;
    font-weight: bold;
  }

JavaScript

var _entityType = {
                ASSEMBLY: "Assembly",
                ASSEMBLYGROUP: "Assembly Group",
                COMPONENT: "Component",
                LOGICSOLVER: "Logic Solver",
                PROTECTIONLAYER: "Protection Layer"
            }

            var _validationType = {
                LOCATIONMISMATCH: "Location Mismatch",
                DUPLICATEARCHITECTURE: "Duplicate Architecture"
            }
var _validationData = [
                {
                    "eid": 100,
                    "entityType": "Assembly",
                    "name": "Assembly 1",
                    "issues": [
                        {
                            "paths": [
                                {
                                    "guid": "92fa8b1d-5dbe-48b4-a29f-28c3e7c459b2",
                                    "pathName": "Assembly Group 1 / Assembly 1"
                                }
                            ],
                            "isError": true,
                            "validationType": "LocationMismatch"
                        }
                    ]
                },
                {
                    "eid": 101,
                    "entityType": "Assembly Group",
                    "name": "Assembly Group 2",
                    "issues": [
                        {
                            "paths": [
                                {
                                    "guid": "9fe6a9dc-b418-4270-88a9-964220dbc579",
                                    "pathName": "Assembly Group 1 / Assembly 1"
                                }
                            ],
                            "availableRows": [
                                {
                                    "eid": -2,
                                    "entityState": "Modified",
                                    "project": null,
                                    "entityName": "Tag3",
                                    "paths": [
           ...