JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://stephband.info/jparallax/js/jquery.parallax.js"></script>
<script src="http://demo.hpyer.cn/js/jquery/jquery.base64.min.js"></script>
<script src="http://lab.rog.ie/chirp/js/chirp.min.js"></script>
  <div id="preload-container">
    <img class="preload-image" id="img0" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img4" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img5" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img6" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img8" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img9" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img10" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img11" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img12" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img13" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img14" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img15" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img16" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img17" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img18" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img19" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img20" src="//placehold.it/200x200" alt="preload-image">
    <img class="preload-image" id="img21" src="//placehold.it/200x200" alt="preload-image">
  </div>
  <span id="copyright">Copyright  |</span>
   <div id="loading">
    <p><img...

CSS

/* Clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* Generals */
html, body {
  height: 100%;
  width: 100%;
  font-family: Tahoma, Geneva, sans-serif;
  background-color: #000000;
  color: #1a1a1a;
}
::-moz-selection{background:#33B5E5;color:#fff;text-shadow:none}
::selection{background:#33B5E5;color:#fff;text-shadow:none}

.hidden {
  display: none;
}

.wrapper {
  position: relative;
  width: 980px;
  margin: 0 auto 0 auto;
}

body {
  overflow: hidden;
  position: relative;
}

/* Fonts */
a {
  color: black;
  text-decoration: none;
}

h1 {
  font-size: 30px;
}

h2 {
  font-size: 40px;
}

h3 {

}

p a{
  color: #9a9a9a;
  text-decoration: none;
}
p a:hover{
  text-decoration: underline;
}
#preload-container {
  display: block;
  width: 1px;
  z-index: 10;
  position: absolute;
  height: 1px;
  visibility: hidden;
  overflow: hidden;
}

/* Application */
#loading {
  display: block;
  height: 200px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999999;
  text-align: center;
  margin-top: 13%;
  font-size: 22px;
  line-height: 0;
}
#loading img {
  background-color: #f9f9f9;
  padding: 15px 180px;
}
#loading p img {
  background-color: transparent;
  padding: 0px;
}

#loading-background {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999998;
  background: url('//placehold.it/200x200') 40% 70% no-repeat #000;
}

#social-container {
  position: absolute;
  display: none;
  top: 10px;
  right: 15px;
  width: 300px;
  z-index: 999991;
}

.twitter-share-button.twitter-count-horizontal {
  float: left !important;
  width: 113px !important;
}

#___plusone_0 {
  float: left !important;
  width: 88px !important;
}
.fb-like {
  float: left !important;
}

#header-parallax.parallax {
  position: relative;
 ...

JavaScript

jQuery(function($) {

  $('#loading').after("<div id='loading-background'></div>");

  //PreLoad
  // Anzahl Bilder
  var amount = 17;
  // Anzahl geladener Bilder
  var loaded = 0;

  $('.preload-image').each(function(index) {
      var img = $(this);
      img.load(function(){
          loaded++;
          if (loaded == amount){

             $('#preload-container').remove();
             $('#loading img#loading-gif').delay(1500).fadeToggle("normal", function(){
               $('#loading p img').fadeToggle("normal", function(){
                 $('#loading').remove();
                 $('#loading-background').fadeToggle("normal", function(){
                   $('#loading-background').remove();
                   $('.text').delay(100).fadeToggle("fast", function(){
                     $('.text').removeClass('hidden');
                     $('.text #home-container img').fadeIn(200, function(){
                       $('.text #home-container p').fadeIn(200, function(){
                         $('#twitter').fadeIn(100, function(){
                           $('#googleplus').fadeIn(100, function(){
                             $('#mail').fadeIn(100, function(){
                               $('#androidweekly').fadeIn(100, function(){
                                 $('#youtube').fadeIn(100, function(){
                                   $('#blogger').fadeIn(100, function(){
                                     $('#elements').fadeIn(100, function(){
                                       $('#maps').fadeIn(100, function(){
                                         $('#more').fadeIn(100);
                                       });
                                     });
                                   });
                                 });
                               });
                             });
                           });
                         });
                       });
                     });
                   });
                ...