JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="picture">
        <div class="textOverlay">
            
<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a   Brand New Product.</em></font></font></h2>

        </div>
    </div>
    <div align="center">
        <img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140" />
    </div>
    <p class="body_text">
        <img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" />
        <p class="body_text">
       
          <img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
        
            <p class="body_text">
                <img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
                <p class="body_text">
                    <img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
                    <div align="center">
                        <img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" />
                    </div>
  </div>

CSS

@charset"UTF-8";

/* CSS Document */
 .image {
    position: relative;
    width: 100%;
    /* for IE 6 */
}
h2 {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    
}
#wrapper{width: 1300px; margin:0px 100px ;}