JSFiddle - React, Tailwind, and code Playground

MetTile - A Package of jQuery Metro UI Tiles

by Jennifer Perrin

HTML

<div class="container_24 clearfix wrap-it">
        <div class="header-top">
            <a href="http://codecanyon.net/item/mettile-a-package-of-jquery-metro-ui-tiles/4158455?WT.ac=new_item&WT.seg_1=new_item&WT.z_author=sktajbir"><img class="download-icon" src="theme/images/download-icon.png" width="45" height="45"/></a>
            <img class="logo" src="theme/images/logo-jEffectBox-mettile.png" />
            <div class="menu">
                <a id="menuOne" href="javascript:void(0);">One</a>
                <a id="menuTwo" href="javascript:void(0);">Two</a>
                <a id="menuThree" href="javascript:void(0);">Three</a>
                <a id="menuFour" href="javascript:void(0);">Four</a>
                <a id="menuFive" href="javascript:void(0);">Five</a>
                <a id="menuSix" href="javascript:void(0);">Six</a>
            </div>
        </div>
        <div>
            <div class="main-box title-box">
                <label>MetTile - A Package of jQuery Metro UI Tiles</label>
                <p>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp MetTile is a jQuery Plugin to add different custom Metro UI Tiles on your website. Add MetTile's JavaScript and CSS file and write below codes and this plugin will automatically generate different Metro UI tiles for you. Its a good plugin to quickly make some animated tiles on your website.</p>
            </div>
            <div id="divOne" class="main-box">
                <div class="example-code">
                    <a class="left tab-active tab-html" href="javascript:void(0);">HTML</a>
                    <a class="tab-js" href="javascript:void(0);">JavaScript</a>
                    <img class="content-html" src="theme/images/MetTileOneHtml.png" />
                    <img class="content-js" src="theme/images/MetTileOneJS.png" style="display:none;"/>
                </div>
                <div class="example-big left">
                    <a id="MetTileOne" class="tile-one"...

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, b, u, i, center, 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-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    min-width: 960px;
    text-align: center;
    background-color: #FFFFFF;
    line-height: 1;
    font-family: 'Open Sans',Helvetica Neue,Lucida Grande,Arial,Helvetica,Verdana,sans-serif;
    font-weight: 100;
}

.container_24 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:before, .clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.header-top {
    background-color: #004b8b;
    width: 100%;
    position: relative;
    height: 300px;
}

.download-icon {
    position: absolute;
    right: 7px;
    top: 2px;
}

.logo {
    top: 82px;
    position: relative;
}

.menu {
    bottom: 10px;
    position: absolute;
    left: 230px;
}

    .menu a {
        color: #0379DE;
        font-size: 18px;
        margin-left: 40px;
        text-decoration: none;
    }

.main-box {
    margin-top: 30px;
    float: left;
    position:relative;
}

.example-code {
    width: 460px;
    height: 180px;
    background-color: #e3e3e3;
    float: left;
    position: relative;
}

    .example-code:hover {
        outline: solid 4px #c3dbfe;
    }

    .example-code a {
        color: #004B8B;
        float: left;
        font-size: 12px;
        margin-left: 5px;
        margin-top: 8px;
      ...

JavaScript

//MetTile v1.0
function InitMenu() {
    $("#menuOne").click(function () {
        AnimateScroll(431, $("#divOne"))
    });
    $("#menuTwo").click(function () {
        AnimateScroll(645, $("#divTwo"))
    });
    $("#menuThree").click(function () {
        AnimateScroll(855, $("#divThree"))
    });
    $("#menuFour").click(function () {
        AnimateScroll(1065, $("#divFour"))
    });
    $("#menuFive").click(function () {
        AnimateScroll(1275, $("#divFive"))
    });
    $("#menuSix").click(function () {
        AnimateScroll(1485, $("#divSix"))
    })
}
function AnimateScroll(e, t) {
    $("body,html").animate({
        scrollTop: e
    }, 500, function () {
        $(t).animate({
            opacity: ".01"
        }, 200, function () {
            $(t).animate({
                opacity: "1"
            }, 200)
        })
    })
}
function InitTopSender() {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $("#back-top").fadeIn()
        } else {
            $("#back-top").fadeOut()
        }
    });
    $("#back-top a").click(function () {
        $("body,html").animate({
            scrollTop: 0
        }, 800);
        return false
    })
}
function InitTab() {
    $(".tab-html").click(function () {
        $(this).parent().children("a").removeClass("tab-active");
        $(this).addClass("tab-active");
        $(this).parent().children("img").hide();
        $(this).parent().find(".content-html").show()
    });
    $(".tab-js").click(function () {
        $(this).parent().children("a").removeClass("tab-active");
        $(this).addClass("tab-active");
        $(this).parent().children("img").hide();
        $(this).parent().find(".content-js").show()
    })
}
function InitFacebook() {
    (function (e, t, n) {
        var r, i = e.getElementsByTagName(t)[0];
        if (e.getElementById(n)) return;
        r = e.createElement(t);
        r.id = n;
        r.src =...