JSFiddle - React, Tailwind, and code Playground

by dwaynie

HTML

<!DOCTYPE html>
<!--[if IE 7]>
  <html class="ie7">
<![endif]-->
<!--[if IE 8]>
  <html class="ie8">
<![endif]-->
<!--[if !IE]>
  <html>
<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>TEST</title>
  </head>
  <body>
    <table id="totals">
      <tr>
        <td>Item total</td>
        <td>$<span>30.00</span></td>
      </tr>
      <tr>
        <td>Shipping</td>
        <td>$<span>30.00</span></td>
      </tr>
      <tr>
        <td>Subtotal</td>
        <td>$<span>220.78</span></td>
      </tr>
    </table>
    <form>
      <input type="submit" id="proceed-to-purchase" class="button dark-big" value="Proceed to purchase">
      <input type="submit" id="continue-shopping" class="button light" value="Continue shopping">
    </form>
    <ul id="notices">
      <li>The exact price of an item is not finalized until you have selected your shipping destination.</li>
      <li>Items in your shopping bag are not reserved and may sell out.</li>
    </ul>
    <div id="footer">
      <ul class="seperated">
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
        <li><a href="#">Test</a></li>
      </ul>
    </div>
  </body>
</html>

CSS

* { margin: 0; padding: 0; }

form { overflow: hidden; }

body { width: 500px; margin: 0 auto; padding: 4px 0; color: #000; }
#header:before, #header:after { content: ""; display: table; }
#header:after { clear: both; }
#header { padding-bottom: 12px; border-bottom: 1px solid #e9e9e9; }
#header, #footer { font-size: 10px; text-transform: lowercase; }
#header .options li { padding: 0 7px; display: inline-block; }
#header .options li:last-child { padding-right: 0; }
#header > ul:first-of-type, #header #checkout-link, #header .wrapper { float: right; }
#header > ul:first-of-type li { display: inline; }
#header #checkout-link, #header .wrapper { clear: right; }
#header #checkout-link { font-size: 12px; font-weight: bold; margin-top: 10px; }
#header #logo { margin-top: 21px; float: left; }
#header .wrapper { margin-top: 30px; }

#empty-bag { background: #efefef; }
#empty-bag { padding: 25px 0; margin-top: -5px; }

#footer { clear: both; margin: 50px auto 20px; text-align: center; width: 100%; border-top: 1px solid #e9e9e9; padding-top: 13px; }
#front #footer { border-top: none; }
#footer li, #footer #copyright, #footer #contact { display: inline-block; vertical-align: top; }
#footer ul:first-of-type { margin-bottom: 15px; white-space: nowrap; font-size: 11px; }
#footer #copyright { clear: left; margin-right: 10px; }
#footer #facebook-like { margin-top: -5px; }


/* Switch to Spree: %s/(..\/images/(\/assets/g */

#grid { position: fixed; top: 0; z-index: 99999; opacity: 0.2; }

#proceed-to-purchase, #continue-shopping, #buy-now { float: right; clear: right; }
#shopping-bag, #checkout-form { overflow: hidden; }
.bag, #order-summary { margin-bottom: 14px; }
.bag { border-collapse: collapse; clear: both; }
#shopping-bag table:first-of-type { width: 100%; }
#shopping-bag table:first-of-type tr.item, #empty-bag { background: #efefef; }
.bag th { text-align: left; padding-bottom: 7px; }
.bag th, #totals td { color: #888; }
.bag td { width: 20%; padding: 15px 0;...