JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tableContainer ">
            <table id="example_table">
                <tr>
                    <th></th>
                </tr>
                <tr>
                    <td class="fa fa-plus-circle">&nbsp;&nbsp;Title 1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!-- additional custom info is here (for Record 1) -->
                        <hr class="micro-hr" />
                        <span class="fa fa-arrow-circle-o-right">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        </span>
                        <hr class="micro-hr" />
                    </td>
                </tr>
                <tr>
                    <td class="fa fa-plus-circle">&nbsp;&nbsp;Title 2</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <!-- additional custom info is here (for Record 2) -->
                        <div class="training-box">
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><br>
                            <hr class="micro-hr" />
                            <span class="fa fa-arrow-circle-o-right">&nbsp;&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br>
                            <hr...

CSS

#example_table {
  border-collapse: collapse;
  font-family: "Lucida Sans Unicode","Lucida Grande",Sans-Serif;
  font-size: 12px;
  margin: 20px;
  text-align: left;
  width: 100%;
}
#example_table th {
  color: #339;
  font-size: 15px;
  font-weight: normal;
  padding: 12px;
}
#example_table td {
  background-color: #e8e8e8;
  border-top: 1px solid #fff;
  padding: 9px 12px;
}
#example_table tr.odd td {
  cursor:pointer;
}
#example_table tr:not(.odd) td {
  background-color: #f4f4ff;
}

.tableContainer{
  width: 90%;
}

#training-box {
background: none no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
display: inline-block;}

.tableup {
    margin-top: -30px;
    margin-left: -20px;
}

JavaScript

$( document ).ready(function() {    
    var element = $('#example_table');
        $(element).find("tr:odd").addClass("odd");
        $(element).find("tr:not(.odd)").hide();
        $(element).find("tr:first-child").show();
        $(element).find("tr.odd").click(function () {
            $(this).next("tr").toggle();
        });
});