JSFiddle - React, Tailwind, and code Playground

by cory a

HTML

<table border='1' cellpadding="1" class="mtable">
  <thead>
    <tr id="rubHeadRow">
      <th rowspan="2" width="22%" class="rubhead">Outcome</th>

      <th colspan="3" width="16%" class="rubhead" data-lvl="1">Level 1</th>
      <th colspan="3" width="16%" class="rubhead" data-lvl="2">Level 2</th>
      <th colspan="3" width="20%" class="rubhead" data-lvl="3">Level 3</th>
      <th colspan="3" width="16%" class="rubhead" data-lvl="4">Level 4</th>
      <th rowspan="2" class="rubhead">Organize</th>
    </tr>
    <tr class="rubheadlow">

      <td>L</td>
      <td>M</td>
      <td>H</td>
      <td>L</td>
      <td>M</td>
      <td>H</td>
      <td>L</td>
      <td>M</td>
      <td>H</td>
      <td>L</td>
      <td>M</td>
      <td>H</td>

    </tr>
  </thead>
  <tbody>
    <tr class="rubrow">
      <td class="outtd"><a class="btn btn-xs btn-primary addout">add outcome</a></td>

      <td colspan="3" class="rubtd scanable">Beginning</td>
      <td colspan="3" class="rubtd scanable">Progressing</td>
      <td colspan="3" class="rubtd scanable">Meeting<div class="floatbtn"><a href="#" data-toggle="modal" class="btn btn-primary btn-circle btn-xs indBtn" data-add='Assessment'><i class="fa fa-plus"></i></a></div></td>
      <td colspan="3" class="rubtd scanable">Established</td>
      <td class="comtd">
        <a href="#" class="up"><span class="glyphicon glyphicon-chevron-up"></span></a>
        <a class="btn btn-xs btn-primary rowclear"><span class='glyphicon glyphicon-remove-sign'></span></a>
        <a href="#" class="down"><span class="glyphicon glyphicon-chevron-down"></span></a>

      </td>
      <tr class="rubrow">
        <td class="outtd"><a class="btn btn-xs btn-primary addout">add outcome</a></td>

        <td colspan="3" class="rubtd scanable">Beginning</td>
        <td colspan="3" class="rubtd scanable">Progressing</td>
        <td colspan="3" class="rubtd scanable">Meeting
          <div class="floatbtn"><a href="#" data-toggle="modal" class="btn...

CSS

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.42;
  border-radius: 15px;
}

.floatbtn {
  float: right;
}

.indDD>li>a {
  white-space: normal!important;
}

JavaScript

$(".indBtn").click( function() {
    $(".fixed").slideToggle("slow");
});

$(".area").click( function() {
    $(".fixed").hide();
});