JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script> 
  <script src="http://marashan.com/site/js/jquery.easing.1.3.js"></script>
  <script src="http://marashan.com/site/js/jquery.transform-0.9.3.min_.js"></script>
  <script src="http://marashan.com/site/js/jquery.transform2d.js"></script>

  
  <style type="text/css">
    .gallery{
	height: 720px;
	overflow: hidden;
	position: relative;
	
	text-align: center;
}

	.gallery .a{
		position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -81px;
        margin-top: 88px;
        opacity:  0;
	}
	
	.gallery .a.pic1{
		top: 300px;
		left: 0px;	
	}
	
	.gallery .a.pic2{
		top: 150px;
		left: 100px;	
	}	
	
	.gallery .a.pic3{
		top: 150px;
		right: 100px;	
	}
	
	.gallery .a.pic4{
		top: 300px;
		right: 0px;	
	}		

	.gallery .box{
		display: inline-block;
		padding-top: 200px;
	}

	.gallery .next{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -65px;
		margin-top: 27px;
		cursor: pointer;
		z-index: 400;
	}
	
	.gallery .carousel_gallery{
	    width: 700px;
        height: 541px; 
        position: absolute;
        top: 0px;
        left: 50%;
        margin-left: -350px;
	}
		
		.gallery .carousel_gallery .a[data-main='true']{
			display: inline-block;
			position: absolute;
			top: 200px;
			left: 99px;
			cursor: pointer;
			opacity: 0;
		}
		
			.gallery .carousel_gallery .a[data-main='true'] img{
				display: block;
			}
	
	.gallery .carousel_gallery_hide{
		display: none;
		width: 360px;
		height: 280px;
		position: absolute;
		top: 300px;
		left: 50%;			
	}
	
		.gallery .carousel_gallery_hide .a{
			display: inline-block;
            

		}
		
			.gallery .carousel_gallery_hide .a img{
				display: block;
			}
  </style>
  


<script type="text/javascript">
  ...