JSFiddle - React, Tailwind, and code Playground

by Jagrati Tomar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<table width="100%" border="0" id="table1">
  <tr>
    <td colspan="6" height="20px" bgcolor="#CCCCCC"><strong>CULTURE</strong></td>
  </tr>

  <tr>
    <td width="5%">
      <p align="center">1</p>
    </td>
    <td width="40%">Is the CDP obvious</td>
    <td width="5%" height="20px">
      <p align="center">1</p>
    </td>
    <td width="5%" height="20px">
      <p align="center">2</p>
    </td>
    <td width="5%" height="20px">
      <p align="center">3</p>
    </td>
    <td width="5%" height="20px">
      <p align="center">4</p>
    </td>
  </tr>
</table>

CSS

table td.active {
    background: #006633;
}

JavaScript

$(document).ready(function(){
    $("#table1 td").click(function(){
        $(this).toggleClass("active");
    });
});