JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<div id="app"></div>

CSS

#container {
    width: 500px;
    height: 600px;
    font-weight: bold;
}

/* 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;
  
  animation: fadeIn 1s infinite alternate;
}

React

function buildControl(control) {
  	function buildOptions(options) {
    	var template = "<option>{value}</option>";
      	return options.reduce(function (memo, option) {
        return memo + template.replace("{value}", option.value);
            }, "")
    }
    let template = "<br>&nbsp;<label>{label}</label>&nbsp;<select>{options}</select><br>",
        content = template.replace("{label}", control.label)
                .replace("{options}", buildOptions(control.state.options));
        $("#container").append($(content));
    }

function RenderVisualize () {
  React.useEffect(function () {
    visualize({   
      auth: {
          name: "joeuser",
          password: "joeuser",
          organization: "organization_1"
      }
},function(v) {
    
    v.inputControls({
        resource: "/public/Samples/Reports/9g.CustomerDetailReport",
        success: function (controls) {
            controls.forEach(buildControl);
            //Remove custom loading indicator once data has successfully loaded
            document.getElementById("loader").style.display = "none";
        },
        error: function (err) {
            alert(err);
        }
    });   
  
})}, [])

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

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