JSFiddle - React, Tailwind, and code Playground

by aaccioly

HTML

<script src="http://www.wesleypicotte.com/assets/js/minicart.js"></script>
<body id="wpBody">
    <div id="siteWrapper">
        <div id="wrapper">
            <div id="banner">
                <div id="mainNav">
                    <ul class="mainNavContainer">
                        <li class="mainNavRows"><a href="http://www.wesleypicotte.com/" title="Fine Art Wilderness Photography of the Pacific Northwest">home</a><span class="vertical">|</span>

                        </li>
                        <li class="mainNavRows"><a href="/images/" title="Landscape and Wilderness Photographs">images</a><span class="vertical">|</span>

                        </li>
                        <li class="mainNavRows"><a href="/fine-art-archival-landscape-nature-prints" title="Fine Art Landscape and Nature Prints">purchase</a><span class="vertical">|</span>

                        </li>
                        <li class="mainNavRows"><a href="/about-wesley-picotte-wilderness-landscapes" title="About Wesley Picotte Wilderness Landscapes">about</a><span class="vertical">|</span>

                        </li>
                        <li class="mainNavRows"><a href="blog" title="Wesley Picotte Wilderness Landscapes Blog" target="_new">blog</a><span class="vertical">|</span>

                        </li>
                        <li class="mainNavRows last"><a href="/contact" title="Contact Wesley Picotte Wilderness Landscapes">contact</a><span class="vertical">|</span>

                        </li>
                    </ul>
                </div>
                <!-- end main nav -->
                <div id="identity">
<a class="logo" href="home">Wesley Picotte Photography</a>

                    <p class="tagline">a celebration & exploration of wilderness landscapes</p>
                </div>
                <!--end identity-->
            </div>
            <!--end banner-->
            <div id="main">
                <div id="wpPayPal"></div>
                <!--end...

CSS

/* 
 * Copied the entire stylesheet for stability. 
 * Scroll to the end of the css for the relevant stuff.
 */

/*********  CSS Reset  *********/


html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}

table { border-collapse: collapse; border-spacing: 0; }

td, th, caption { font-weight: normal; text-align: left; }

img, fieldset { border: 0; }

q:before, q:after { content:''; }





/*********  global formatting  *********/


body {
    background-color: #333333;
}

#siteWrapper {
    background-color: #333333;
    margin: auto;
}

#wrapper {
    margin: 0 auto;
    background-color: #333333;
    height:auto;
}

.link-bullet {
    font: 1em 'Dosis', sans-serif;
    color: #3D3D3D;
    padding-left: 10px;
}




/*********  the header elements  *********/


#banner {
   height: 80px;
   background-color: #FFF;
   border-bottom: 3px solid #000;
}

#identity {
    margin: 13px 0 0 30px;
    padding: 0;
    min-width: 300px;
    float: left;
    clear: left;
    display: block;
}

#identity a {
    font: 1.3em 'Fauna One', serif;
    text-decoration: none;
    color: #B68F5E;
    float: left;
}

#identity h1.tagline {
    font: .9em 'Handlee', cursive;
    color: #B68F5E;
    clear: left;
}

#identity p.tagline {
    font: .9em 'Handlee', cursive;
    color: #B68F5E;
    clear: left;
}

.st_sharethis span {
    padding-left: 30px;
    letter-spacing: .1em;
    color: #B0B0B0;
}




/*********  the main navigation  *********/


#mainNav {
    float: right;
    font: .9em 'Dosis', sans-serif;
    text-transform:capitalize;
    margin: 13px 30px 0 0;
}

#mainNav li {
    list-style: none;
    display: inline;
    padding: 0;
    text-align: center;
}

#mainNav a {
    text-decoration: none;
    color: #333;
    padding: 10px 5px;
    text-align: center;
}

#mainNav a:hover {
    color: #B68F5E;
}

#mainNav .vertical {
    text-decoration: none;
 ...

JavaScript

PAYPAL.apps.MiniCart.render({
    parent: 'wpPayPal',
    events: {
        afterShow: function () {
            $("#wpPayPal").css("overflow", "visible");
        },
        onHide: function () {
            $("#wpPayPal").css("overflow", "");
        }
    }
});