JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#dashboard {
    width: 1000px;
    height: 600px;
}

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

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

p {
  position: relative;
  top: 50px;
  right: 250px;
  
  font: italic bold 1.2em/1 Bodoni, serif;
  color: #555;
  text-align: center;
  
  animation: fadeIn 1s infinite alternate;
}

React

function RenderVisualize () {
  React.useEffect(function () {
   visualize({
    auth: {
        name: "joeuser",
        password: "joeuser",
        organization: "organization_1"
    }
}, function (v) {
    var dashboard = v.dashboard({
        resource: "/public/Samples/Dashboards/4._New_Dashboard",
        container: "#dashboard",
        error: function(e) {
            alert(e);
        }
    });
    
    $("button").on("click", function(e) {
        dashboard
            .destroy()
            .fail(function(e) { alert(e); })
            .done(function() { console.log("dashboard destroyed"); });
    });
})}, [])

  return (
   <React.Fragment>
   <button>Logout</button>

<div id="dashboard">
      <div><p>Loading...</p></div>
</div>
   </React.Fragment>

  )
}

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