JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<link rel="stylesheet" href="http://cdn.shopify.com/s/files/1/0172/8862/t/9/assets/style.css">
<div class="background-holder"></div>
<div id="attmobilescroll" style="display:none;"></div>
<div id="iwrapper">
    <div id="scroller">
        <div id="container">
            <header id="header" class="pieelement clearfix use-logo currencies ">
                <div id="cart-summary" class="accent-text"></div>
                <!-- #cart-summary --> <a id="logo" href="/" role="banner">
    </a>

                <nav role="navigation">
                    <ul id="nav">
                        <li class="nav-item first   dropdown"> <a class="nav-item-link smooth" href="#">
                  Browse Store
                </a>

                            <ul class="sub-nav">
                                <li class="sub-nav-niblet"></li>
                                <li class="sub-nav-item first "> <a class="sub-nav-item-link first " href="/collections/tablets">Tablets</a>

                                </li>
                                <li class="sub-nav-item  "> <a class="sub-nav-item-link  " href="/collections/mobile-phones">Mobile Phones</a>

                                </li>
                                <li class="sub-nav-item  "> <a class="sub-nav-item-link  " href="/collections/consumer-digital-cameras">Consumer Cameras</a>

                                </li>
                                <li class="sub-nav-item  "> <a class="sub-nav-item-link  " href="/collections/digital-slr-cameras">Digital SLR Cameras</a>

                                </li>
                                <li class="sub-nav-item  "> <a class="sub-nav-item-link  " href="/collections/lenses">Lenses</a>

                                </li>
                                <li class="sub-nav-item  last"> <a class="sub-nav-item-link  last" href="/collections">More</a>

                                </li>
                            </ul>
                        </li>
     ...

CSS

body {
    -webkit-background-size: 100% 100%;
}
#slides {
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0, 0, 0);
}
#container {
    width:100%;
    padding:0;
    background:none;
    /*top: -45px;*/
}
#header {
    margin: 0 auto;
    width: 884px;
    padding:0 40px;
    background: #FFFFFF url("http://cdn.shopify.com/s/files/1/0172/8862/t/3/assets/black.png?4904") repeat-x scroll left top;
    top:-45px;
}
#content {
    margin: 0 auto;
    width: 884px;
    padding:0 40px;
    background:#FFFFFF;
}
#footer {
    margin:0 auto;
    background:#FFFFFF;
    width:100%;
}
#footer-modules {
    margin: 0 auto;
    padding: 40px 0;
}
#product-slider h2 {
    margin:0;
    padding:40px 0 10px;
}
#attparallax {
    width:100%;
    height:auto;
    margin:0 auto;
    position:relative;
}
.godown {
    bottom: 0;
    float: left;
    height: 33px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.godown .button {
    display:block;
    width:72px;
    height:33px;
    background:url('http://cdn.shopify.com/s/files/1/0172/8862/t/3/assets/parallaxarrow3neww.png?4906');
    padding:0;
    border-radius:0;
    margin:0 auto;
}
.godown .button:hover {
    cursor:pointer;
}
#slide0 {
    background:#FFFFFF;
    width:964px;
    height:auto;
    padding:0;
    margin: 0 auto;
    background-repeat:no-repeat;
    background-position:center;
}
#slide0 .slide0inner {
    padding:0 40px 20px;
}
#slide0 #collection-header {
    margin: 0;
    padding: 52px 0 38px;
    background-repeat:no-repeat;
    background-position:center top;
}
#slide1 {
    /*background:url('http://cdn.shopify.com/s/files/1/0172/8862/t/9/assets/face1.jpg?8689') no-repeat center top;  background-size:cover;	width:100%;    height:560px;*/
}
#slide2 img {
    height:178px!important;
}
#slide6 {
    background:#FFFFFF;
    height:320px;
    padding:0 0 33px;
    margin: 0 auto;
    background-repeat:no-repeat;
    background-position:center top;
}
#slide7 {
   ...