JSFiddle - React, Tailwind, and code Playground

HTML

<div id="contentWrapper">
  <h1>
            <a href="/">
                US Direct Goodies
                    <span><!-- image sandbag --></span>
                    <small>All The Great Goodies You Want & Need</small>
            </a>
        </h1>



  <div id="productWrapper">
    <img src="images/black-focus-flashlight-torch.jpg" alt="Vintage Harry Potter Notebook/Diary Book/Hard Cover" />
    <div id="productInfo">
      <h2>E6 XML T6 1800LM 10W 5 Modes Focus Flashlight Torch Black</h2>
    </div>
    <div id="purchaseInfo">
      <div id="total">Your Price:</div>
      <div id="totalPrice">$17.08 USD</div>
      <br>
      <br>
      <ul>
        <li><b>List Price:</b><del>$12.49 USD</del></li>
        <li><b>You Save:</b><span class="price">$3.50</span></li>
      </ul>

      <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_s-xclick">
        <input type="hidden" name="hosted_button_id" value="HVDS8AR6EA4GC">
        <input type="image" src="images/cart.jpg" alt="shopping cart" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
        <img alt="PayPal - The safer, easier way to pay online" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
      </form>
      FREE SHIPPING WORLDWIDE
      <br>
      <br> 100% SATISFACTION GUARANTEE
      <br>
      <br> 100% SECURE PAYMENTS Through PayPal

      <!-- purchaseInfo -->
    </div>
    <!-- productInfo -->
  </div>

  <div id="bar">
    <p>Product Description</p>
    <!-- bar -->
  </div>

  <div id="description">
    <p>The beam of light from this flashlight is bright and wide. The bright beam can be seen miles away in the dark, that you can use it to guide your ways. Widely used, it is a wonderful tool for household use! This flashlight is features high-quality
      material that is sturdy and durable enough for extended daily use.</p>
    <br>
    <br>
  ...

CSS

/* null margins and padding to give good cross-browser baseline */

html,
body,
address,
blockquote,
div,
form,
fieldset,
caption,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
ul,
li,
ol,
ul,
table,
tr,
td,
th,
p,
img {
  margin: 0;
  padding: 0;
}

img,
fieldset {
  border: none;
}

font-family {
  arial,
  helvetica,
  sans-serif;
}


/* fix for legacy iOS and windows Mobile devices */

@media (max-width:512px) {
  * {
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
  }
}


/* fix for HDX displays like the Kindle Fire HDX */

@media (-webkit-min-device-pixel-ratio: 2) and (min-width: 1600px), (min-resolution: 172dpi) and (min-width: 1600px) {
  html {
    font-size: 200%;
  }
}

body {
  background: #FFF;
}

#contentWrapper {
  max-width: 69em;
  margin: 0 auto;
  overflow: hidden;
  -webkit-box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #000;
  box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #000;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  background: #FFF;
}

* html #contentWrapper {
  width: 55em;
}

h1 {
  padding-left: 0;
  font-size: 100%;
  -webkit-border-radius: 1em 1em 0 0;
  border-radius: 1em 1em 0 0;
}

h1 a {
  position: relative;
  display: block;
  padding: 40px 0;
  text-decoration: none;
  font: bold 40px/44px arial, helvetica, sans-serif;
  color: #000;
}

h1 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 109px;
  background: url(images/header.jpg) center no-repeat;
  -webkit-border-radius: 0.4em 0.4em 0 0;
  border-radius: 0.4em 0.4em 0 0;
}

h1 small {
  display: block;
  font: bold 48%/120% arial, helvetica, sans-serif;
}

h2 {
  font-size: 1.5em;
}

.clear-both {
  clear: both;
}

#productWrapper {
  padding: 1em;
  background: #FFF;
}

#productInfo {
  background: #FFF;
  margin: -32em 0 0 37em;
  padding-top: 0.5em;
  width: 30em;
  height: auto;
  font-family: arial, helvetica, sans-serif;
  color: #000;
  font: 1em;
}

#purchaseInfo {
  width: 19em;
  height: 24em;
  margin: 2em 0 0 40em;
 ...