JSFiddle - React, Tailwind, and code Playground

by DugSohn

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.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">
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h4>SMART COLUMS FOR SUBJECTS</h4>


<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h4>SORTABLE SUBJECTS FOR INCIDENTS</h4>
      <div class="row">


        <div class="col-sm-12">

          <table class="table table-sm">
            <col>
            <col>
            <colgroup span="2"></colgroup>
            <tr>
              <th rowspan="2">INCIDENT <i class="fa fa-sort pull-right"></i></th>
              <th rowspan="2">INVESTIGATION STATUS <i class="fa fa-sort pull-right"></i></th>
              <th colspan="4" scope="colgroup" style="background-color:aliceblue">SUBJECT </th>
            </tr>
            <tr>
              <th scope="col" style="background-color:aliceblue">Name <i class="fa fa-sort-asc pull-right"></i></th>
              <th scope="col" style="background-color:aliceblue">LOCATION <i class="fa fa-sort-up pull-right"></i></th>
              <th scope="col" style="background-color:aliceblue">EMAIL <i class="fa fa-sort pull-right"></i></th>
              <th scope="col" style="background-color:aliceblue">PHONE <i class="fa fa-sort pull-right"></i></th>
            </tr>


            <tbody>
              <tr>
                <td rowspan="4">INC1012 - PHISHING</td>
                <td rowspan="4"> <span class="fa fa-circle" style="color:green;"></span> </td>
                <td><a><i class="fa fa-gear"></i> Andy Name</a></td>
                <td>value</td>
                <td>value</td>
                <td>value</td>
              </tr>
                 <tr>
                <td><a><i class="fa fa-gear"></i> David Name</a></td>
               ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

* {
  font-family: open sans;
  font-weight: 200px;
}

body {
  margin: 10px;
  background: #efefef;
}

.fa {
  color: #999
}

.btn-success .fa {
  color: #fff
}

small {
  text-transform: uppercase;
  color: #aaa;
}

.fa-green {
  color: green;
}

h4 {
  margin-bottom: 20px;
  font-size: 14px;
  text-transform: uppercase;
  opacity: .5;
}

hr {
  /*margin:30px 0;*/
}

#refresh {
  margin-left: -2px;
  margin-right: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ui-logs {
  width: 100%;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-top: 10px;
}

.btn {
  text-transform: uppercase;
}

th {
  background-color: #ececec;
  border-right: 1px solid #fff;
}

body {
  background-color: white
}

JavaScript

$("#maint").click(function() {

  alert('Are you sure you want switch to Maintenace Mode? Have you notifed users?')

});
$('.ybx-spin-refresh').click(function() {
  $(this).find('.fa-refresh').addClass('fa-spin fa-green');

  //Trying to use setTimeout, but doesn't seem to work either.
  var $el = $(this);
  setTimeout(function() {
    $el.find('.fa-refresh').removeClass('fa-spin');
    $el.addClass('btn-success');
  }, 3000);

});