JSFiddle - React, Tailwind, and code Playground

by Muhammad Hassaan

HTML

<!-- Social Media Integration -->
<div id="divGooglePlus"></div>
<div id="divTwitter"></div>
<div id="divFacebook"></div>

CSS

.box-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 15px;
    margin-bottom: 40px;
}
.box-container h3 {
    font-size: 17px;
    padding: 0px;
    margin: 0px 0px 14px;
    font-weight: bold;
    padding-bottom: 15px;
    border-bottom: 2px solid;
}
.red {
    color: #AF0000;
}
#divFacebook h3 {
    font-size: 22px;
    color: #999999;
    padding-bottom: 5px;
    border-bottom: 2px solid #5c5c5c;
    margin-bottom: 20px;
}
.blue {
    color: #007BC3;
}

JavaScript

var divGP = '<div class="box-container"><h3 class="red">Google+</h3><div class="g-page" data-width="265" data-href="//plus.google.com/+TomashaFun" data-rel="publisher"></div></div>';

var divTW = '<div class="box-container"><h3 class="blue">Twitter</h3><div class="twitter-timeline" width="265" data-dnt="true" href="https://twitter.com/Fun_Mobile" data-widget-id="557506816436088832"></div></div>';

var divFB = '<div class="box-container"><h3>Follow us</h3><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FTomasha.Fun&amp;width=295&amp;height=300&amp;colorscheme=dark&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=270847049637126" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:300px; width:295px; " allowTransparency="true"></iframe></div>';

/*$(window).one('scroll', function () {*/

$('#divGooglePlus').html(divGP);
(function () {
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
})();


$('#divTwitter').html(divTW);

! function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
        p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, "script", "twitter-wjs");

$('#divFacebook').html(divFB);

if ($('#disqus_thread').length) {

    var disqus_shortname = 'tomasha';

    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] ||...