JSFiddle - React, Tailwind, and code Playground

HTML

<div id="accordion" style="width: 240px; height: 400px;">

<h3>Rig Counts</h3>
<div style="width: 238px; height: 270px;">
    <iframe name="I1" id="I1" src="http://www.cmich.edu" frameborder="0"  width="100%" height="100%" scrolling="no">
        </iframe>   </div>

<h3>Lost Time</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I2" id="I2" src="http://www.cmich.edu" frameborder="0" width="100%" height="100%" scrolling="no"></iframe> </div>

<h3>Rate Of Penetration</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I3" id="I3" src="http://www.cmich.edu" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>   </div>

<h3>No Of Incident</h3>
    <div style="width: 238px; height: 270px;">
    <iframe name="I4" id="I4" src="http://www.cmich.edu" frameborder="0" width="100%" height="100%" scrolling="no">
        </iframe>   </div>


</div>

JavaScript

$(function() {
$( "#accordion" ).accordion({     
collapsible: true,
heightStyle: "content",
animate: {        
    duration: 200,        
    down: {            
    easing: "easeOutBounce",            
    duration: 1000        
    }    
    }
});  
});