JSFiddle - React, Tailwind, and code Playground

by martinradio

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<br>
<div class='main-content'>
    <div class="container-fluid">

        <!-- top row  -->
        <div class="row">

            <!-- left column (mycomplandscape/barGraph) -->
            <div class="col-lg-6 d-flex flex-column">
                <!-- top card (My Competitive Landscape) -->
                <div class="col d-flex " style="max-height: max-content">
                    <div class="card w-100">
                        <div class="card-body">
                            BOX1 STUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFF
                        </div> <!-- / .card-body -->
                        
                    </div>
                
                </div> <!-- ./top card -->
                <br>
                <!-- bottom card (Bar Graph) -->
                <div class="col d-flex">
                    <div class="card w-100">
                        <div class='card-body'>
BOX2 STUFFSTUFFSTUFFSTUFFSTUFFSTUFFSTUFF
                        </div>
         
                    </div>
                </div> <!-- ./bottom card -->
            </div>

            <!-- right column (table) -->
            <div class="col-lg-6 d-flex">
                <div class="col d-flex">
                <!-- card (long table) -->
                    <div class="card w-100">
 
                            <!-- table bar 1...

CSS

td:nth-child(9){
  white-space: nowrap;
  line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

JavaScript

$(document).ready(function() {
    var dataSet = [
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
        ["ant", "zxcvbn", "can", "78", "here"],
        ["zxc", "sdf3", "dg", "3", "cccchere"],
    ]
    
        var myAssortmentOpportunitiesTable = $('#myAssortmentOpportunitiesTable').DataTable({
        retrieve: true,  //if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up
        "language": {    //empty table message
            "emptyTable": "No table data availiable."
        },
        "sDom": 't', 
               dom: 'Bfrtip',
        buttons: ['excelHtml5', 'csvHtml5',],
        "info": false,
        data: dataSet,
        "responsive": true,
        "scrollY": "200px",
    });
    
        //set datatable to use custom search box
    $('#myAssortmentOpportunitiesTableSearch').on('keyup change', function () {
        myAssortmentOpportunitiesTable.search(this.value).draw();
    });
    
    //BOTTOM TABLE
        var dataset2 = [
        ["x", "img", "-/123123132", "other", "pet supplies", "other", "amazon", "petshome", "PetsHome Cat Collar, Dog Collar, [Bling Rhinestones] Premium PU Leather with Pendant Adjustable Collars for Small Dog and Cat", "1", "$11.22",...