JSFiddle - React, Tailwind, and code Playground

by ahmadka

HTML

<link rel="stylesheet" href="http://blu-rays.pk/web/temptest/tooltipster.css">
<script src="http://blu-rays.pk/web/temptest/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="http://blu-rays.pk/web/css/blueHighCondensedFontKit.css">
<!-- PLACE AT BOTTOM OF HEAD: START -->
<script type="text/javascript">
    var switchTo5x = false;
</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
    stLight.options({
        publisher: "923fc52a-72e1-4962-8b24-8fb506200b8d",
        doNotHash: false,
        doNotCopy: false,
        hashAddressBar: false
    });
</script>
<!-- PLACE AT BOTTOM OF HEAD: END -->
<div id="footer_about_content">
    <div class="footer_row_0">
        <!--<img src="http://i.imgur.com/lG4VdOU.png">-->
        <img class="left_silhouette" title="&quot;Even the smallest person can change the course of the future.&quot; –Galadriel" src="http://blu-rays.pk//web/sil/footer_silhouette_lotr.png">
        <img class="center_silhouette" title="&quot;He’s the hero Gotham deserves, but not the one it needs right now. So we’ll hunt him because he can take it, because he’s not our hero. He’s a silent guardian, a watchful protector, a dark knight.&quot; –Jim Gordon" src="http://blu-rays.pk//web/sil/footer_silhouette_bm.png">
        <img class="bs" title="&quot;You thought we could be decent men in an indecent time! But you were wrong. The world is cruel.&quot; –Two Face" src="http://blu-rays.pk//web/sil/footer_silhouette_bs.png">
        <img class="center_silhouette" title="&quot;I like the way you die, boy.&quot; –Django" src="http://blu-rays.pk//web/sil/footer_silhouette_du.png">
        <img class="hpf" title="&quot;Your mother died to save you. If there is one thing Voldemort cannot understand, it is love.&quot; –Albus Dumbledore" src="http://blu-rays.pk//web/sil/footer_silhouette_hpf.png">
        <img class="center_silhouette" title="&quot;Happiness can be found,...

CSS

.subscribe {
    height: 28px;
    width: 255px;
    margin: 0px auto 0px auto;
    padding-left: 20px;
    padding-top: 3px;
}
.form-wrapper {
    max-width: 270px;
    margin: auto;
}
.cf {
    zoom: 1;
}
.form-wrapper #emailInputText {
    max-width: 145px;
    width: 100%;
    height: 22px;
    float: left;
    font: 10px'lucida sans', 'trebuchet MS', Tahoma;
    border:1px solid #414d7d;
    background-color: #30395c;
    margin: 0px 5px 0px 0px;
    -moz-box-shadow: inset 0 0 10px #252c47;
    -webkit-box-shadow: inset 0 0 10px #252c47;
    box-shadow: inset 0 0 10px #252c47;
    text-align:center;
    color: #a4afcb;
}
.form-wrapper #emailInputText::-webkit-input-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText:-moz-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText::-moz-placeholder {
    color: #a4afcb;
}
.form-wrapper #emailInputText:-ms-input-placeholder {
    color: #a4afcb;
}
.form-wrapper #submitBtnForDesktop {
    overflow: visible;
    position: relative;
    float: left;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 28px;
    width: 88px;
    text-indent:-9999px;
    background: url("http://blu-rays.pk/web/footer_sign_up_button_n.png");
    transition: background-image 0.5s;
}
.form-wrapper #submitBtnForDesktop:hover {
    background: url("http://blu-rays.pk/web/footer_sign_up_button_h.png");
}
#footer_about_content {
    margin: 80px auto auto auto;
    max-width: 980px;
}
.customFooter {
    color: #939598;
    float: left;
    width: 100%;
    background-color: #252c44;
}
.customFooter .customFooterColumns {
    float: left;
    max-width: 980px;
    width: 100%;
    padding-top: 30px;
}
.customFooterColumns .customFooterColumn {
    float: left;
    text-align: center;
    padding: 15px 5px 10px;
    width: 33.26%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.customFooterColumns .split {
    width: 1px;
    height:69px;
    float: left;
  ...

JavaScript

$(document).ready(function () {
    $('.left_silhouette, .center_silhouette, .right_silhouette').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'bottom',
        offsetY: -3,
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 450,
        speed: 500,
        maxWidth: 270
    });
});

$(document).ready(function () {
    $('.bs').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'right',
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 450,
        speed: 500,
        maxWidth: 270
    });
});

$(document).ready(function () {
    $('.hpf').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'right',
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 450,
        speed: 500,
        maxWidth: 270
    });
});

$(document).ready(function () {
    $('.taim').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'left',
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 450,
        speed: 500
    });
});

$(document).ready(function () {
    $('.ffcj').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'left',
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 450,
        speed: 500
    });
});

$(document).ready(function () {
    $('.footer_icon').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'bottom',
        offsetY: -10,
        theme: '.my-custom-theme',
        delay: 0,
        speed: 500
    });
});

$(document).ready(function () {
    $('.social_icon').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'bottom',
        offsetY: -5,
        theme: '.my-custom-theme',
        delay: 0,
        speed: 500
    });
});

$(document).ready(function () {
    $('.st_sharethis_large').tooltipster({
        animation: 'fade',
        arrow: false,
        position:...