JSFiddle - React, Tailwind, and code Playground

by AlexJsh02

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table id="rTable" class="rTable">
  <thead class="rTableHeading">
    <th class="rTableHead">Month</th>
    <th class="rTableHead">Expenses</th>
    <th class="rTableHead">Notes</th>
  </thead>
  <tbody class="rTableBody">
    <tr class="rTableRow">
      <td class="rTableCell" tabindex="0">January</td>
      <td class="rTableCell" tabindex="0">$20</td>
      <td class="rTableCell note" tabindex="0"><span style="display:block;">Car repair</span></td>
    </tr>
    <tr class="rTableRow">
      <td class="rTableCell" tabindex="0">February</td>
      <td class="rTableCell" tabindex="0">$130</td>
      <td class="rTableCell note" tabindex="0"><span style="display:block;">Furniture</span></td>
    </tr>
    <tr class="rTableRow">
      <td class="rTableCell" tabindex="0">March</td>
      <td class="rTableCell" tabindex="0">$30</td>
      <td class="rTableCell note" tabindex="0"><span style="display:block;">Pool cleaning</span></td>
    </tr>
  </tbody>
  <!--<div class="rTableFoot">
    <div class="rTableHead">Sum</div>
    <div class="rTableHead">$180</div>
    <div class="rTableHead">All done</div>
  </div>-->
</table>

CSS

.rTable {   	
  display: table;   	
  width: 100%;
  border: 1px solid black;
} 
.rTableRow {   	
  display: table-row; 
}
/*.rTableCell, .rTableHead {   	
  display: table-cell;   	
  padding: 3px 10px;   	
  border: 1px solid #999999; 
}*/
.rTableHeading {   	
  display: table-header-group;   	
  background-color: #ddd;   	
  font-weight: bold; 
}
.rTableHeading DIV {
  display: table-cell;   	
  padding: 3px 10px;   	
  border: 1px solid #999999;  
}
.rTableRow DIV {
  display: table-cell;   	
  padding: 3px 10px;   	
  border: 1px solid #999999;    
}
.rTableFoot {   	
  display: table-footer-group;   	
  font-weight: bold;   	
  background-color: #ddd; 
} 
.rTableBody {
    display: table-row-group; 
}
.note {}

JavaScript

var data = '{
  "1" : "Car repair",
  "2" : "Furniture",
  "3" : "Pool cleaning"
}'

$(document).ready(function () {

  $("td.note > span").on("focus", 
    function (event) {
      $(this).css("background-color", "Green");
    }
  );
});