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 {
     position: relative;
     float: left;
     margin: 0 0 -6px 0;
     padding: 20px 20px 0 20px;
     background-color: #fff;
     z-index: 1;
  font: normal 62.5% Arial, Helvetica, sans-serif;
 }
 #feature_box_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;
      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;
 }

 #feature_box_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;
 }

 #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 {
   font: normal 62.5% Arial, Helvetica, sans-serif;
     width: 245px;
     margin-bottom: 10px;
     line-height: 22px;
     font-size: 1.2em;
     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...

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