JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
    <title>My shopping cart</title>
    
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
        
    <link rel='shortcut icon' href='https://s3.amazonaws.com/ikeyless/favicon.ico' type='image/x-icon'>
            <link rel='stylesheet' type='text/css' href='http://yui.yahooapis.com/2.8.2r1/build/reset-fonts-grids/reset-fonts-grids.css'/>
            <link rel='stylesheet' type='text/css' href='http://beta.ikeyless.com/lib/css/style.css'/>
            <link rel='stylesheet' type='text/css' href='http://beta.ikeyless.com/lib/css/store/cart/view.css'/>
        <script type='text/javascript'>
         var iKeyless = {};
        iKeyless.widget = {};
    </script>

    <!--[if IE]>
    <style type="text/css">
        .clearfix {
            zoom: 1;
            display: block;
        }
    </style>
    <![endif]-->
    <style type="text/css">
    html, body{
        height:100%;
        }
        body{background:none;/*to revert the stylesheet*/}
        .wrapper{
            background: url(//static.ikeyless.com/template/bg-top.png) top center no-repeat, url(//static.ikeyless.com/template/bg-bottom.png) bottom center no-repeat;
        
    min-height: 100%;
    height: auto !important;
        height:100%;
        }
    </style>
    
</head>
<body>
    <div class="wrapper">
<div id="custom-doc" >
    <div id='hd'>
                <div class='top-nav'>
            <ul class='clearfix'>
                <li class='continue-shopping'><a href='/'><img src='//static.ikeyless.com/template/store/back-to-shopping.png'/></a></li>
            </ul>
        </div>

                <div class='business-hours'>
            Toll free: (866) 528-4930 &middot; Mon-Fri 9-5 EST
        </div>
        <div class='logo'>
            <a href='/'><img...