JSFiddle - React, Tailwind, and code Playground

by brianfidler

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" >


     <!-- Datatables CSS -->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" >

    <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" >

    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" >
    

    <!-- Datatables JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

    <!--<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>-->
    <script src="https://d2xz00m0afizja.cloudfront.net/cdn/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>

    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    
    <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
  </head>
  
  <body>

    <div class="container">
        <div class="row text-center">
            <h1 class="mt-3 ml-3 mb-3">Resource Libary POC</h1>
        </div>
    </div>

    <div class="container">
        <div class="row text-center">	
	        
...

CSS

h5.subhead {
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
color: #63666a;
margin-top: 15px;
}

a {
color: #bc204b;
text-decoration: underline;
}

a:hover {
color: #8a1738;
}

.list-item {
margin-bottom: 15px;
}

.active-faq {
border-left: 5px solid #888888;
}

.arrow-down {
padding-top: 5px;
}

.card {
margin-bottom: 25px;
}

.card > a {
color: #292b2c;
text-decoration: none;
}

.card-body {
padding: 0px 35px 0px 35px;
}

.card-header {
background-color: #ffffff;
border-bottom: 1px solid #dddddd;
font-size: 14px;
}

@media screen and (max-width: 525px) {
.card-header {
    font-size: 14px;
}
}

.card-header:hover {
/* border: 1px solid #bc204b; */
background: #ddd;
color: #000;
}

div.scrollmenu {
overflow: auto;
white-space: nowrap;
}

div.scrollmenu a {
display: inline-block;
text-align: center;
text-decoration: none;
}

.faq-cat-content {
margin-top: 20px;
}

.faq-cat-content .panel-heading:hover {
background-color: #efefef;
}

.fas,
.fa-chevron-down {
padding-top: 15px;
}

.faq-cat-tabs li a {
padding: 10px 15px 10px 15px;
border: 1px solid #dddddd;
color: #292b2c;
text-decoration: none;
}

h1,
p,
i {
color: #292b2c;
}

.nav-tabs li a:focus,
.panel-heading a:focus {
outline: none;
}

.panel-heading a,
.panel-heading a:hover,
.panel-heading a:focus {
text-decoration: none;
color: #292b2c;
}

.panel-faq .panel-heading .panel-title span {
font-size: 13px;
font-weight: normal;
}

.resources {
color: #bc204b;
font-size: 14px;
text-decoration: underline;
}

div.container { max-width: 1200px; }

/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

/* Styling for the index columns */
th.index,
td.index {
    background-color: white !important;
    border-top: 1px solid white !important;
    border-bottom: none !important;
}
div.DTFC_LeftHeadWrapper table {
    border-bottom: 1px solid white !important;
}
div.DTFC_LeftHeadWrapper th {
    border-bottom: 1px solid...

JavaScript

$(document).ready(function() {

	    var table = $('#myTable').DataTable({
	    		    ajax: {
	    		    	"url": "https://d2xz00m0afizja.cloudfront.net/cdn/data/data-resource-library.json",
	    		    	"dataSrc": ""
	    		    },
	    		    columns: [
	    		    	{ "data": "resource_id" },
	    		    	{ "data": "resource_thumb_link" },
	    		    	{ "data": "resource_title" },
	    		    	{ "data": "resource_thumb_url" },
	    		    	{ "data": "resource_file_loc" },
	    		    	{ "data": "categories" },
	    		    	{ "data": "resource_market" },
	    		    	{ "data": "resource_sections" },
	    		    	{ "data": "resource_library_typos" }
	    		    ],
	    		    columnDefs: [
	    		    	{ 	
	    		    		"height": 50,
	    		    		"targets": [ 1 ] 
	    		    	},
	    		        {
	    		            "targets": [ 0, 3, 4, 7, 8 ],
	    		            "visible": false,
	    		            "searchable": false,
	    		            "sortable":false
	    		        },
	    		        {
	    		            "targets": [ 1 ],
	    		            "visible": true,
	    		            "searchable": true,
	    		            "sortable":false
	    		        },
	    		        {
	    		            "targets": [ 2 ],
	    		            "visible": true,
	    		            "searchable": true,
	    		            "sortable":false
	    		        },
	    		        {
	    		            "targets": [ 5 ],
	    		            "visible": true,
	    		            "searchable": true,
	    		            "sortable": false
	    		        },
	    		        {
	    		            "targets": [ 6 ],
	    		            "visible": true,
	    		            "searchable": true,
	    		            "sortable": false
	    		        }
	    		    ],
		            initComplete: function (settings, json) {
			            //alert( 'DataTables has finished its initialisation.' );
			            this.api().columns(5).every( function () {
			                var column = this;
			                var select = $('<select...