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>Explore Blu-rays.pk</h3>
        <p>Welcome to Blu-rays.pk, the No. 1 place to get Blu-rays in Pakistan!</p>
<p>Hover over the different icons below to discover a little taste of what Blu-rays.pk has to offer.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
      </div>
    
      <div class="labels">
        <ul>
          <li class="blu_future">
            <h3><a href="/green-tea-b4">Our Teas</a></h3>
          </li>
  
          <li class="over_350">
            <h3><a href="/teapots-b33">Teaware</a></h3>
          </li>
      
          <li class="blu_3d">
            <h3><a href="/blu_3d">Our Blog</a></h3>
          </li>
          
          <li class="shippingX">
            <h3><a href="/opening-a-trade-account-a218">Wholesale</a></h3>
          </li>
          
          <li class="social">
            <h3><a href="/delivery-and-social-a40">Our Packaging</a></h3>
          </li>
          
          <li class="help">
            <h3><a href="/ethical-tea-partnership-etp-a197">Ethics &amp; Us</a></h3>
          </li>
        </ul>
        
      </div>
          
      
      <div class="layer layer-blu_future blu_future"></div>
      <div class="layer layer-over_350 over_350"></div>
      <div class="layer layer-blu_3d blu_3d"></div>
      <div class="layer layer-shippingX shippingX"></div>
      <div class="layer layer-social social"></div>
      <div class="layer layer-help help"></div>
      
      <div class="layer layer-welcome" style="display: block;"></div>
    
      <div class="extended-info blu_future">
        <h3>The Era Of High Definition</h3>
        <p>In today's ever changing cinematic world, it is a must to exprerience the cutting edge when it comes movies. With Blu-ray, you can do exactly that!</p>
<p>With every frame...

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: 940px;
height: 39px;
text-indent: -9999px;
margin: 0;
background: transparent url("http://i.imgur.com/kDfLZb0.png");
z-index: 20;
}

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: 980px;
height: 654px;
margin-top: -7px;
  margin-left: -22px;
background: transparent url("http://i.imgur.com/IUnDrXi.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;*/
margin: 50px 150px 0 0;
}

.description h3 {
width: 300px;
height: 63px;
margin-bottom:15px;
/*margin: -10px 0px 15px 20px;*/
text-indent: -9999px;
background: transparent url("http://i.imgur.com/Oj7XKcN.png") 0 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: 245px;
margin-bottom: 10px;
line-height: 22px;
}

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

ul, ol {
margin: 10px 0...

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();
       ...