JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<!-- Provide the URL to visualize.js -->
<script src="http://localhost:8081/jasperserver-pro/client/visualize.js"></script>
<!-- Provide a container for the main report and one for the drill-down -->
<!--
<div>
    <div style="width:830px;" id="main"></div>
<div style="width:500px;" id="drill-down"></div>
</div>
-->
<div>
    <div id="main" style="background-color:#FFD700;height:200px;width:400px;float:left;">
</div>

<div id="drill-down" style="background-color:#EEEEEE;height:200px;width:200px;float:left;">
Content goes here</div>
</div>

CSS

#main{
float: left;
}
#drill-down{
float: left;
}

JavaScript

visualize({
auth: {
name: "jasperadmin",
password: "jasperadmin",
organization: "organization_1"
}
}, function (v) {
v("#main").report({
resource: "/public/Samples/Reports/AccountList",
linkOptions: {
beforeRender: function (linkToElemPairs) {
linkToElemPairs.forEach(showCursor);
},
events: {
"click": function(ev, link){
if (link.type == "ReportExecution"){
v("#drill-down").report({
resource: link.parameters._report,
params: {
parStoreId: [link.parameters.parStoreId],
},
});
}
console.log(link);
}
}
},
error: function (err) {
alert(err.message);
}
});
function showCursor(pair){
var el = pair.element;
el.style.cursor = "pointer";
}
});