JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="firstContainer"></div>
<div id="secondContainer"></div>

CSS

html,
body {
  height: 100%;
}

#firstContainer {
  width: 100%;
  height: 50%;
  float: left;
}

#secondContainer {
  width: 100%;
  float: left;
  height: 50%;
}

/*Start of Crosstab specific styles*/
/*Crosstab side panel*/
#secondContainer .jr-mDatatable-cellRowlabel.jr-mDatatable-cellField.jr {
  background-color: #E0D2BC;
  font-weight: bold;
  color: black;
}

/*Crosstab totals section in side panel*/
#secondContainer .jr-mDatatable-cell.jr-mDatatable-cellRowlabel.jr.jr-mDatatable-cellTotal {
  background-color: #E0D2BD;
  border: 1px solid #c19a83;
}

/*Crosstab totals in main table - even row*/
#secondContainer .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab totals in main table - odd row*/
#secondContainer .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr-mDatatable-cellTotal.jr {
  background-color: #e8dcd0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - odd row*/
#secondContainer .jr-mDatatable-rowOdd.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Crosstab value in main table - even row*/
#secondContainer .jr-mDatatable-rowEven.jr .jr-mDatatable-cell.jr-mDatatable-cellValue.jr {
  background-color: #F0E9E0;
  border: 1px solid #ad795b;
}

/*Table styles*/
/*Datatable headers*/
#secondContainer .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell.jr {
  background-color: #8e5f40;
  font-size: 1.24em;
  font-weight: bold;
  color: white;
}

/*Header for cell text*/
#secondContainer .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-text {
  padding-top: .30em;
}

/*Header for cell numbers*/
#secondContainer .jr-mDatatable-header.jr .jr-mDatatable-row.jr .jr-mDatatable-cell-number {
  padding-top: .60em;
}

/*Datatable cells*/
#secondContainer .jr-mDatatable-cell.jr {
  color: black;
  font-size:...

JavaScript

var firstView = "/public/viz/Adhoc/Store_Sales1";
var secondView = "/public/viz/Adhoc/Store_Sales2";

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var first = v.adhocView({
    resource: firstView,
    container: "#firstContainer",
    success: function() {
      console.log("First container view rendered");
    },
    error: function(e) {
      console.log(e);
    }
  });
  var second = v.adhocView({
    resource: secondView,
    container: "#secondContainer",
    canvas: { 
    	type: "Crosstab" 
    },
    error: function(e) {
      console.log(e);
    }
  });
});