JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<div id="hp_secondary_container">

    <h2>Explore Jenier World of Teas</h2>
  
    <!--<img src="templates/default/images/hp_temp_world.png" alt="temp" />-->
    
    <div class="wrap">
  
      <div class="description">
        <h3>Discovering Tea From Around the World</h3>
        <p>Today, tea is as popular as its ever been and is enjoyed throughout the world in many forms.</p>
<p>We hold over 170 varieties including white teas, green teas, oolong teas, black teas, rooibos, fruit, herbal and naturally flavoured teas - all of which are the finest quality, picked at their peak and stored at their best.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
      </div>
    
      <div class="labels">
        <ul>
          <li class="our_teas">
            <h3><a href="/green-tea-b4">Our Teas</a></h3>
          </li>
  
          <li class="teaware">
            <h3><a href="/teapots-b33">Teaware</a></h3>
          </li>
      
          <li class="blog">
            <h3><a href="/blog">Our Blog</a></h3>
          </li>
          
          <li class="wholesale">
            <h3><a href="/opening-a-trade-account-a218">Wholesale</a></h3>
          </li>
          
          <li class="packaging">
            <h3><a href="/delivery-and-packaging-a40">Our Packaging</a></h3>
          </li>
          
          <li class="ethics">
            <h3><a href="/ethical-tea-partnership-etp-a197">Ethics &amp; Us</a></h3>
          </li>
          
          <li class="shipping">
            <h3><a href="/delivery-and-packaging-a40">Shipping Options</a></h3>
          </li>
        </ul>
        
      </div>
          
      
      <div class="layer layer-our_teas our_teas"></div>
      <div class="layer layer-teaware teaware"></div>
      <div class="layer layer-blog blog"></div>
      <div class="layer layer-wholesale wholesale"></div>
      <div class="layer layer-packaging packaging"></div>
      <div class="layer layer-ethics ethics"></div>
      <div class="layer layer-shipping...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

#hp_secondary_container {
position: relative;
float: left;
margin: 0 0 -6px 0;
padding: 20px 20px 0 20px;
background-color: #fff;
z-index: 1;
}

#hp_secondary_container h2 {
position: relative;
width: 939px;
height: 36px;
text-indent: -9999px;
margin: 0;
background: transparent url("http://www.jenierteas.com/templates/default/images/headers.png") -611px 0 no-repeat;
}

h2 {
font-family: Arial,Helvetica,sans-serif;
line-height: 1.58em;
letter-spacing: .04em;
color: #4a6491;
font-size: 1.8em;
font-weight: bold;
margin: 20px 0 3px 0;
}

#hp_secondary_container .wrap {
position: relative;
float: left;
width: 939px;
height: 450px;
margin-top: 30px;
background: transparent url("http://www.jenierteas.com/templates/default/images/cup.jpg") 0 bottom no-repeat;
}

body {
font: normal 62.5% Arial,Helvetica,sans-serif;
color: #777;
}

.description {
color: #828282;
padding-top: 40px;
width: 230px;
z-index: 20;
right: 0;
position: absolute;
margin: 0 20px 0 0;
}

.description h3 {
width: 230px;
height: 54px;
margin: 0 0 15px 0;
text-indent: -9999px;
background: transparent url("http://www.jenierteas.com/templates/default/images/hp_base_headers.png") -1610px 0 no-repeat;
}

h3 {
font-family: Arial,Helvetica,sans-serif;
line-height: 1.4em;
letter-spacing: .04em;
font-weight: 500;
color: #4a6491;
font-size: 1.6em;
font-weight: bold;
margin: 20px 0 3px 0;
}

.description p {
width: 230px;
margin-bottom: 10px;
line-height: 22px;
}

p {
font-size: 1.2em;
line-height: 1.66em;
margin: 0 0 15px 0;
color:...

JavaScript

jQuery(function (a) {
    a("#lists").data("hovering", false).mouseleave(function () {
        $this = a(this);
        $this.data("timeout", setTimeout(function () {
            $this.data("hovering", false)
        }, 350))
    });
    a("#lists > li").hover(function () {
        var b = a(this);
        b.siblings().each(function () {
            if (a(this).get(0) != b.get(0)) {
                a(this).removeClass("hover")
            }
        });
        clearTimeout(b.data("timeout"));
        clearTimeout(a("#lists").data("timeout"));
        var c = a("#lists").data("hovering") == true ? 100 : 350;
        b.data("timeout", setTimeout(function () {
            b.addClass("hover");
            a("#lists").data("hovering", true)
        }, c))
    }, function () {
        var b = a(this);
        clearTimeout(b.data("timeout"));
        var c = a("#lists").data("hovering") == true ? 100 : 350;
        b.data("timeout", setTimeout(function () {
            b.removeClass("hover")
        }, c))
    });
    if (a.fn.tabs) {
        a(".productpage #price_tab_links").next().tabs(a("#price_tab_links a"));
        a("#price_tab_links a").click(function () {
            var b = a(this).attr("href");
            a("#price_tabs .add_qty input:text").each(function () {
                this.value = 0
            }).filter(b + " .add_qty input:text").val(1)
        })
    }
    if (a.fn.scrollable) {
        a(".scrollable, .scrollable2, .scrollable3, .scrollable4").scrollable({
            easing: "custom",
            speed: 700,
            circular: true
        });
        a.easing.custom = function (f, g, e, k, j) {
            var h = 1.70158;
            if ((g /= j / 2) < 1) {
                return k / 2 * (g * g * (((h *= (1.525)) + 1) * g - h)) + e
            }
            return k / 2 * ((g -= 2) * g * (((h *= (1.525)) + 1) * g + h) + 2) + e
        }
    }
    a("input#q, input#email_address").each(function (b) {
        var c = a(this).val();
       ...