JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<!-- Bootstrap - Latest compiled and minified -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app"></div>

CSS

#container {
    width: 1200px
}

#ic {
    width:300px;
    float:left;
    padding-right: 15px;
}

#report {
  width:800px;
  float:left;
}

/* You can replace the following with your own custom loading indicator */
@import "compass/css3";

@keyframes fadeIn { 
  from { opacity: 0; } 
}

p {
  position: relative;
  top: 50px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  }

React

function RenderVisualize () {
  React.useEffect(function () {
  visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {

		let resourceUri = "/public/Samples/Reports/Cascading_Report_2_Updated";
    
    let report = v.report({
    		resource: resourceUri, 
        container: "#report",
        events: {
            reportCompleted: function(status) {
                success: document.getElementById("ic").style.display = "none";
            }
        },
    });
    
     let inputControls = v.inputControls({
    		resource: resourceUri,
    		container: "#ic",
        events: {
        	change: function(params, error){
          	if (!error){
            	report.params(params).run();  
            } 
          }
        }
    });
});

  
}, [])

  return (
  <React.Fragment>
     <div id="container">
      <div id="ic">
        <div><p>Loading...</p></div>
      </div>
      <div id="report"></div>
    </div>
  </React.Fragment>
  )
}

ReactDOM.render(<RenderVisualize />, document.querySelector("#app"))