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">
<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>

<p>QUALITY AND CONVENIENCE</p>
<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, even in the darkest of times, if one only remembers to turn on the light.&quot; –Albus Dumbledore"...

CSS

p { 
	font-family: BlueHighwayCondensed-Regular;
	font-weight: normal;
	font-style: normal;
  font-size: 40px;
}

.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://i.imgur.com/ANkUR4e.png") no-repeat 0 0 transparent;
}

.form-wrapper #submitBtnForDesktop:hover {
background: url("http://i.imgur.com/ANkUR4e.png") no-repeat 0 -28px transparent;
}

#footer_about_content {
margin: 0 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;
  padding-top:13px;
}

.customFooterColumns .contactsColumn...

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: 700,
        speed: 500,
        maxWidth: 270
    });
});

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

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

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

$(document).ready(function () {
    $('.ffcj').tooltipster({
        animation: 'fade',
        arrow: false,
        position: 'left',
        theme: '.my-custom-theme_footer_sil_quotes',
        delay: 700,
        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:...