JSFiddle - React, Tailwind, and code Playground

by agus makmun

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div class="cart-icon-top">
</div>

<div class="cart-icon-bottom">
</div>

<div id="checkout">
	CHECKOUT
</div>

<div id="info">
	<p class="i1">Add to cart interaction prototype by Virgil Pana</p>
<p>    Follow me on <a href="https://dribbble.com/virgilpana" style="color:#ea4c89" target="_blank">Dribbble</a> | <a style="color:#2aa9e0" href="https://twitter.com/virgil_pana" target="_blank">Twitter</a></p>
</div>

<div id="header">	
	<ul>
        <li><a href="">Home</a></li>
        <li><a href="">BRANDS</a></li>
        <li><a href="">DESIGNERS</a></li>
        <li><a href="">CONTACT</a></li>                                              
    </ul>		
</div>

<div id="sidebar">
	<h3>CART</h3>
    <div id="cart">
    	<span class="empty">No items in cart.</span>       
    </div>
    
    <h3>CATEGORIES</h3>
    <div class="checklist categories">
    	<ul>
        	<li><a href=""><span></span>New Arivals</a></li>
            <li><a href=""><span></span>Accesories</a></li>
            <li><a href=""><span></span>Bags</a></li>
            <li><a href=""><span></span>Dressed</a></li>
            <li><a href=""><span></span>Jackets</a></li>
            <li><a href=""><span></span>jewelry</a></li>
            <li><a href=""><span></span>Shoes</a></li>
            <li><a href=""><span></span>Shirts</a></li>
            <li><a href=""><span></span>Sweaters</a></li>
            <li><a href=""><span></span>T-shirts</a></li>
        </ul>
    </div>
    
    <h3>COLORS</h3>
    <div class="checklist colors">
    	<ul>
        	<li><a href=""><span></span>Beige</a></li>
            <li><a href=""><span style="background:#222"></span>Black</a></li>
            <li><a href=""><span style="background:#6e8cd5"></span>Blue</a></li>
            <li><a href=""><span style="background:#f56060"></span>Brown</a></li>
            <li><a href=""><span...

CSS

/*	Reset & General
---------------------------------------------------------------------- */
* { margin: 0px; padding: 0px; }
body {
	font-family: "Open Sans", sans-serif; 
	overflow:hidden;	
}
#wrapper{
	overflow: hidden;
	height: 1153px;
	width: 1643px;
	background:#fff;
}
#header{
	height:92px; 
	background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/header-icons.png") 1448px -2px no-repeat;
	border-bottom:1px solid #eee;
}
#header ul{padding:33px 0 0 45px;}
#header li{
	list-style:none;
	float:left;
	margin-right:30px;	
}
#header li a{
	font-weight:700;
	color:#333;
	font-size:14px;	
	text-decoration:none;
	text-transform:uppercase;
	letter-spacing:1px;
}
#headerli a:hover{
	color:#000;
	cursor:pointer;
}
#grid-selector{
	height: 10px;
	width: 1291px;
	padding: 40px 0 40px 30px;
	float: left;
	color: #5d5f68;
	font-size: 14px;
}
#grid-menu{
	float:right;
	width:105px;
}
#grid-menu ul{
  width: 65px;
  float: right;
  position: relative;
  top: -1px;}
#grid-menu li{	 
	 float:right;
	 width:25px;
	 height:25px;
	 list-style:none;
}
#grid-menu li a{	 
  	 display:block;
	 width:25px;	
	 height:25px;
	 background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/grid-menu.png") 0 0  no-repeat;
}
#grid-menu li.smallGrid{margin-right:7px;}
#grid-menu li.smallGrid a{background-position:0 -33px;}
#grid-menu li.largeGrid a{background-position:-37px 0;}

#grid-menu li.smallGrid a.active{background-position:0 0;}
#grid-menu li.largeGrid a.active{background-position:-37px -33px;}
 

#grid{	
	width: 1335px;
	position: absolute;
	left: 340px;
	height: 1200px;
	top: 180px;
}
#sidebar{
	float:left;
	background:#fff;
	width:275px;	
	padding:13px 0 0 45px;
	height:1400px;
	border-right:1px solid #eee;
}
#sidebar h3{
	color:#262626;
	text-transform:uppercase;
	font-size:14px;
	font-weight:700;
	padding:35px 0 10px 0;
	letter-spacing:1px;
	clear:both;
}
#cart{padding:0px;}
#cart...

JavaScript

$(document).ready(function(){
	
	$(".largeGrid").click(function(){											
    $(this).find('a').addClass('active');
    $('.smallGrid a').removeClass('active');
    
    $('.product').addClass('large').each(function(){											
		});						
		setTimeout(function(){
			$('.info-large').show();	
		}, 200);
		setTimeout(function(){

			$('.view_gallery').trigger("click");	
		}, 400);								
		
		return false;				
	});
	
	$(".smallGrid").click(function(){		        
    $(this).find('a').addClass('active');
    $('.largeGrid a').removeClass('active');
    
		$('div.product').removeClass('large');
		$(".make3D").removeClass('animate');	
    $('.info-large').fadeOut("fast");
		setTimeout(function(){								
				$('div.flip-back').trigger("click");
		}, 400);
		return false;
	});		
	
	$(".smallGrid").click(function(){
		$('.product').removeClass('large');			
		return false;
	});
  
  $('.colors-large a').click(function(){return false;});
	
	
	$('.product').each(function(i, el){					

		// Lift card and show stats on Mouseover
		$(el).find('.make3D').hover(function(){
				$(this).parent().css('z-index', "20");
				$(this).addClass('animate');
				$(this).find('div.carouselNext, div.carouselPrev').addClass('visible');			
			 }, function(){
				$(this).removeClass('animate');			
				$(this).parent().css('z-index', "1");
				$(this).find('div.carouselNext, div.carouselPrev').removeClass('visible');
		});	
		
		// Flip card to the back side
		$(el).find('.view_gallery').click(function(){	
			
			$(el).find('div.carouselNext, div.carouselPrev').removeClass('visible');
			$(el).find('.make3D').addClass('flip-10');			
			setTimeout(function(){					
			$(el).find('.make3D').removeClass('flip-10').addClass('flip90').find('div.shadow').show().fadeTo( 80 , 1, function(){
					$(el).find('.product-front, .product-front div.shadow').hide();															
				});
			},...