JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<script src="//cdn.datatables.net/scroller/1.2.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/scroller/1.2.2/css/dataTables.scroller.css">
<div class="container">
    <div class="row">
    <div class="col-sm-12">
<table id="casenotes">
                <thead>
                    <tr>
                        <th>noteid</th>
                        <th>Date</th>
                        <th>Issue</th>
                        <th>Time Spent</th>
                        <th>Note</th>
                        <th>Last edit</th>
                    </tr>
                </thead>
            </table>
    </div>
</div>
</div>

JavaScript

$(document).ready(function(){
    var jsonstr = '{"data":[{"noteid":"8405","notedate":"2014-12-03","issues":"Initial Issues - Relationship,","timespent":"40","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null},{"noteid":"8425","notedate":"2014-12-04","issues":"Follow up ","timespent":"15","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null},{"noteid":"8528","notedate":"2014-12-19","issues":"Follow up ","timespent":"15","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null},{"noteid":"8560","notedate":"2015-01-05","issues":"Follow up ","timespent":"15","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null},{"noteid":"9250","notedate":"2015-04-14","issues":"Follow up ","timespent":"30","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null},{"noteid":"9251","notedate":"2015-04-14","issues":"Follow up ","timespent":"15","note":"<p>This is a note</p><p>This is a new line</p>","lastedit":null}],"recordsTotal":6,"recordsFiltered":6,"draw":"1"}'
    
    $("#casenotes").DataTable({
        ajax: function (d, c, s) {
            var d = $.parseJSON(jsonstr);
            c(d);
        },
        serverSide: true,
        responsive: true,
        searching: false,
        columns: [
            {data: "noteid", visible:false},
            {data: "notedate", width: "10%"},
            {data: "issues", width: "10%", createdCell: function (td, cellData, rowData, row, col) {
                    $(td).addClass('cnissues').addClass('vtop');
                }, class: "cnissues"
            },
            {data: "timespent", width: "15%"},
            {data: "note", createdCell: function (td, cellData, rowData, row, col) {
                }, class: "cnissues", width: "55%", render: function (data, type, row, meta) {
                    return "<div class='cnnotes'>" + data + "</div>";
                }
            },
            {data: "lastedit", width: "10%"}
        ],
       ...