JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<div id="feature_box_container">
     <h2>Explore Jenier World of Teas</h2>

    <!--<img src="templates/default/images/hp_temp_world.png" alt="temp" />-->
    <div class="wrap">
        <div class="welcome_message">
             <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="choice_icons">
            <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="shipping">
                     <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="screen screen_blu_future blu_future"></div>
        <div class="screen screen_over_350 over_350"></div>
        <div class="screen screen_blu_3d blu_3d"></div>
        <div class="screen screen_shipping shipping"></div>
        <div class="screen screen_social social"></div>
        <div class="screen screen_help help"></div>
        <div class="screen screen_welcome" style="display: block;"></div>
        <div class="feature_details blu_future">
             <h3>The Era Of High Definition</h3>

            <p>In today's ever changing...

CSS

#feature_box_container {
    clear: both;
    position: relative;
    background-color: #fff;
    z-index: 1;
    font: normal 62.5% Arial, Helvetica, sans-serif;
    width: 980px;
    margin-left: -20px;
}
#feature_box_container h2 {
    position: relative;
    width: 940px;
    height: 39px;
    text-indent: -9999px;
    background: transparent url("http://i.imgur.com/kDfLZb0.png");
    z-index: 20;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.58em;
    letter-spacing: .04em;
    color: #4a6491;
    font-size: 1.8em;
    font-weight: bold;
    margin: 20px auto 3px auto;
}
#feature_box_container .wrap {
    position: relative;
    float: left;
    width: 980px;
    height: 654px;
    margin-top: -7px;
    background: transparent url("http://i.imgur.com/2peSktV.jpg") 0 bottom no-repeat;
}
#feature_box_container .welcome_message {
    color: #828282;
    padding-top: 40px;
    width: 230px;
    z-index: 20;
    right: 0;
    position: absolute;
    /*margin: 0 20px 0 0;*/
    margin: 42px 150px 0 0;
}
#feature_box_container .welcome_message h3 {
    width: 300px;
    height: 63px;
    /*margin-bottom:15px;*/
    text-indent: -9999px;
    background: transparent url("http://i.imgur.com/Oj7XKcN.png") 0 0 no-repeat;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4em;
    letter-spacing: .04em;
    color: #4a6491;
    font-size: 1.6em;
    font-weight: bold;
    /*margin: 20px 0 3px 0;*/
    margin: 20px 0 15px 0;
}
#feature_box_container .welcome_message p {
    width: 245px;
    margin-bottom: 10px;
    line-height: 22px;
    color: #777;
}
#feature_box_container ul, ol {
    margin: 10px 0 10px 10px;
    color: #777;
}
#feature_box_container .choice_icons li.blu_future {
    bottom: 100px;
    left: 90px;
}
#feature_box_container .choice_icons .blu_future {
    -webkit-animation-duration: 0.5s;
}
#feature_box_container .choice_icons li {
    width: 160px;
    position: absolute;
    z-index: 99;
    font-size: 12px;
   ...

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,...