JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 100%; margin: 0 auto;" class="metaslider metaslider-flex metaslider-364 ml-slider">
    
    <div id="metaslider_container_364">
        <div id="metaslider_364" class="flexslider">
            <ul class="slides">
                <li style="display: block; width: 100%;" class="slide-370 ms-image">
	                <img src="http://placehold.it/700x300" height="300" width="700" alt="" class="slider-364 slide-370" />
	                <div class="caption-wrap">
	                	<div class="caption">
	                		<h2 style="text-align:center">Can I place this in centre?</h2>
	                	</div>
	                </div>
                </li>
            </ul>
    	</div>
    </div>
    
</div>