JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="share_buttons">
	<a class="social_icons share_f" href="https://www.facebook.com/sharer/sharer.php?u=RandPuush.0fees.net" target="_blank" title="Share on Facebook"></a>
	<a class="social_icons share_t" href="https://twitter.com/home?status=Check%20out%20randpuush.0fees.net%0Athere%20you%20can%20watch%20random%20image%20people%20post%20with%20puush." target="_blank" title="Share on Twitter"></a>
	<a class="social_icons share_g" href="https://plus.google.com/share?url=http://randpuush.0fees.net/" target="_blank" title="Share on G+"></a>
</div>
<div id="controll_container">
	<input class="generate" type="button" value="Randomize"></input>
	<input class="aut_gen" type="button" value="Auto Randomize"></input>
	<input class="aut_gen_stop" type="button" value="Stop Auto Randomize" style="display:none;"></input>
	<input class="_aut_gen_speen" type="number" placeholder="Adjust Auto Speed"></input>
	<a class="link" href="http://www.puu.sh/" target="_blank">Open on puush</a>
</div>
<div class="gif_container" style="display:none;"></div>
<span class="gif_pos"><img class="gif" src="images/loading.gif" style="height: 13em; display:none;" /></span>
<div class="img_container">
	<div class="img_vertpos">
		<img class="img" src="" style="display: block;">
	</div>
	<div id="share_buttons_curr">
		<a class="social_icons_curr share_curr_f" href="https://www.facebook.com/sharer/sharer.php?u=RandPuush.0fees.net" target="_blank" title="Share on Facebook"></a>
		<a class="social_icons_curr share_curr_t" href="https://twitter.com/home?status=Check%20out%20randpuush.0fees.net%0Athere%20you%20can%20watch%20random%20image%20people%20post%20with%20puush." target="_blank" title="Share on Twitter"></a>
		<a class="social_icons_curr share_curr_g" href="https://plus.google.com/share?url=http://randpuush.0fees.net/" target="_blank" title="Share on G+"></a>
	</div>
</div>
<div id="logg">
    <div class="logg_list"><span class="logg_list_ul"></span></div>
</div>
<div id="info">
	<div...

CSS

body {
    height:51.3em;
}
.img {
    max-height: 590px;
    max-width: 71em;
}
.gif {
    height: 60px;
    display: none;
    position: absolute;
    left: 45%;
    top: 13em;
}
.gif_container {
    position:absolute;
    height: 98%;
    width: 88%;
    background: rgba(0, 0, 0, 0.3);
    z-index:300;
    max-height: 590px;
    max-width: 71em;
    -webkit-filter:blur(5px);
}
.stats {
    display: inline-flex;
    list-style: none;
}
#logg:hover {
    max-height: 26em;
    height: inherit;
}
#logg {
    transition: height .7s ease;
    position: fixed;
    right: 20px;
    bottom: 0em;
    list-style: none;
    border: solid 1px gray;
    max-height: 26em;
    min-height: 4em;
    width: 170px;
    height: 4em;
    padding: 3px;
    background: silver;
    padding-top: 2em;
}
.logg_top {
    background: -webkit-linear-gradient(top, gray, silver);
    border: solid 1px gray;
    padding-left: 1.4em;
    position: absolute;
    top: 3px;
    width: 9.1em;
}
#logg:hover > .logg_list {
    overflow-y: auto;
}
.logg_list {
    overflow-y: hidden;
    max-height: 26em;
}
.logg_item {
    border: solid 1px gray;
    margin-bottom: 3px;
    margin-top: 4px;
    padding-left: 1em;
    padding-top: 2px;
}
.logg_item_text {
    position: relative;
    bottom: 38px;
}
.logg_item_img {
    height: 50px;
    width: 50px;
    border: solid 1px black;
    position: relative;
    right: 13px;
}

JavaScript

function jqUpdateSize(){
    var width = $(window).width();
    var height = $(window).height();
	
	
	$('#screen_res').empty();
	$('#screen_res').append('Window Size: '+ width +'x'+ height );
	
	
    if(width == 1351 && height == 667){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1366x768.css"/>');
    }if(width == 1920 && height == 1019){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1920x1080.css"/>');
    }if(width == 1920 && height == 901){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1920x1080.css"/>');
    }if(width == 1935 && height == 979){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1920x1080.css"/>');
    }if(width == 1920 && height == 979){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1920x1080.css"/>');
    }if(width == 1680 && height == 949){
        $('.stylesheet').remove();
        $('head').append('<link rel="stylesheet" type="text/css" href="css/index_1680x1050.css"/>');
	}
}
$(document).ready(jqUpdateSize);
$(window).resize(jqUpdateSize);

$(document).ready(function () {
    var t = 1;
    var e = 1;
    var l = 1;

    function gen() {
        var min = 7;
        var max = 7;

        var m = Math.floor(Math.random() * (max - min + 1)) + min;
        var chars = "1234567abcdefghiklmnopqrstuvw";
        var string_length = 4;
        var randomstring = '';


        for (var i = 0; i < string_length; i++) {
            var rnum = Math.floor(Math.random() * chars.length);
            randomstring += chars.substring(rnum, rnum + 1);
        }

        $('.link').attr('href', 'http://www.puu.sh/' + m + randomstring);
        $('.text').html(m + randomstring);
        $('.times').html('Links...