JSFiddle - React, Tailwind, and code Playground

by mubarakpasha

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>

<a id="view-code" href="http://codepen.io/virgilpana/pen/ByEqew" target="_blank">VIEW CODE</a>

<div id="window">
	<div id="header">
    	<div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>       
           
    <div class="thumbs">    
	    <div class="thumb">
        <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
        	<p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
	        <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
        	<p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
    	    <p>
              <span></span>
            <span></span>
            </p>
        </div>
        <div class="thumb">
	            <p>
              <span></span>
               <span></span>
            </p>
        </div>
        <div class="thumb">
            <p>
              <span></span>
            <span></span>
            </p>
        </div>
             
    </div>
    
    <div id="bootstrap-carousel">
        <div class="slides">                                            
           
            <div class="slide">                         
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     width="253.5px" height="279.1px"  viewBox="0 0 93.5 79.1" style="enable-background:new 0 0 93.5 79.1;" xml:space="preserve">
                <g>
                    <path d="M87.8,60.2V9.8c0-2.6-2.1-4.7-4.7-4.7H9.8c-2.6,0-4.7,2.1-4.7,4.7v61.1c0,2.6,2.1,4.7,4.7,4.7h73.3
                        c2.6,0,4.7-2.1,4.7-4.7v-9.3C88,61.1,88,60.6,87.8,60.2z...

CSS

body{
	background:#384d67; 	
	text-align:center;
	font-family: "Open Sans", sans-serif; 
}
#view-code{
  color:#82b4eb;      
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:620px;
  left:50%;margin-left:-30px;
  z-index:200;
}
#view-code:hover{color:#fff}
#window{
	margin:45px auto 0;
	border-radius:6px;
	background:#234871;
	width:678px;
	height:549px;	
	overflow:hidden;
	position:relative;
}
#header{
	background:#82b4eb;
	height:33px;
	padding-left:18px;
}
#header .circle{
	background:#689cd4;
	border-radius:50%;
	float:left;
	width:12px;
	height:12px;
	margin-right:6px;
	margin-top:11px;
}

.thumbs{display:none;}
.thumb, .thumb p{  
  width: 226px;
  height: 172px;
  float: left;
  margin:0;  
  background: #e3e5e9;
}
#cloneWrap{
  width: 270px;
  height: 210px;
  position:absolute;
  top:0;
  left:0;
  border:none;
}
#cloneWrap p{position:static; width:100%; height:100%}
.floatingThumb{
  width: 226px;
  height: 172px;
}
.thumb:hover{cursor:pointer;}
.thumb p{
	position:relative;
	top:0;
	left:0;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}
.thumb p.expand{
	background:#fff;
	width:270px;
	height:210px;	
	z-index:300;
	-webkit-transition: all 80ms ease-out;
		   -moz-transition: all 80ms ease-out;
		    -ms-transition: all 80ms ease-out;
		     -o-transition: all 80ms ease-out;
		        transition: all 80ms ease-out;
}

.thumb p.eq0, .slide.eq0{background:#4773a3}
.thumb p.expand.eq0{top:0;left:0;}
.thumb p.eq1, .slide.eq1{background:#fff}
.thumb p.expand.eq1{top:0;left:-20px;}
.thumb p.eq2, .slide.eq2{background:#cde9e3}
.thumb p.expand.eq2{top:0;left:-40px;}
.thumb p.eq3, .slide.eq3{background:#2f5885}
.thumb p.expand.eq3{top:-20px;left:0;}
.thumb p.eq4, .slide.eq4{background:#f0f7ff}
.thumb p.expand.eq4{top:-20px;left:-20px;}
.thumb...

JavaScript

$(document).ready(function(){

	jQuery.easing.def = "easeOutQuad";	  
  
	var fullSlides = $('div.slide');
  var carouselScrollTop = 0;
  var scrollBy =516; 
  var isScrolling = 0;
  $(fullSlides).eq(0).clone().appendTo("#window").addClass('firstSlide');
  
   var loader = setInterval(function(){
      $('#loader').fadeIn().addClass('animate');
      setTimeout(function(){$('#loader').removeClass('animate');}, 400);     
  }, 500);
  
  setTimeout(function(){$("#loader").fadeOut();}, 2200);
  
  setTimeout(function(){     
    clearInterval(loader);
    $("#espose").fadeIn();
    $('.firstSlide').addClass('animate');
    setTimeout(function(){
    $("div.firstSlide").eq(0).find('p').animate({'margin-top':'194px', 'margin-left':'56px', 'opacity':'1'});
        $("div.firstSlide").eq(0).find('svg').animate({'margin-top':'110px', 'opacity':'1'});		
     }, 300);
    setTimeout(function(){
     $("#bootstrap-carousel").show();
     $("div.firstSlide").hide();
    }, 700);
  }, 2500);
       
	var carouselHeight = 0;
	$(fullSlides).each(function(){
		carouselHeight += scrollBy;
	});      
	$('div.slides').css('height', carouselHeight+"px");	
	$("#bootstrap-carousel").scroll(function() {				
		
    
    if($(this)[0].scrollTop > carouselScrollTop && isScrolling == 0){
      isScrolling = 1;  
      carouselScrollTop += scrollBy;        
        $(this).scrollTo(carouselScrollTop,500);
      setTimeout(function(){
          isScrolling = 0;          
        }, 500);
    }else if($(this)[0].scrollTop < carouselScrollTop && isScrolling == 0){
      isScrolling = 1;  
      carouselScrollTop -= scrollBy;        
        $(this).scrollTo(carouselScrollTop, 500);
      setTimeout(function(){
          isScrolling = 0;          
        }, 500);
    }
    
    
		if($(this)[0].scrollTop >= 355 && $(this)[0].scrollTop < 900){						
			$(fullSlides).eq(1).find('p').animate({'margin-top':'190px', 'opacity':'1'});
			$(fullSlides).eq(1).find('svg').animate({'margin-top':'110px',...