JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://kaya.jalbum.net/LightFlow/v3/index.html"></script>
<link rel="stylesheet" href="res/styles.css">
<link rel="stylesheet" href="res/contentflow/contentflow.css">
<script src="res/lightflow/lightflow.js"></script>
<script src="res/contentflow/contentflow.js"></script>
<div id="contentFlow" class="ContentFlow ContentFlowAddOn_search ContentFlowAddOn_lightwindow ContentFlowAddOn_slideshow">			
    <div class="loadIndicator" style="display: none;"><div class="indicator"></div><noscript><br/>Javascript must be enabled to display this page!</noscript></div>
    <div id="flow" class="flow" style="visibility: visible; height: 422px; margin-bottom: -125px;">
		<div class="item" style="display: none; left: 675px; top: 108.813px; height: 282px; width: 250px; font-size: 100%; z-index: 32768; visibility: visible;">
	      <canvas class="content hidden landscape" src="thumbs/P1000223.JPG" alt="Opéra de Paris" origproportion="1.3266666666666667" width="398" height="450"></canvas>
				<div class="ref hidden">item1</div>
			<div class="caption">Opéra de Paris</div>
				<div class="comment hidden"></div>
				<div class="author hidden">Copyright 2010</div>
				<div class="params hidden"></div>
				<div class="info hidden"></div>
				<div class="thumbWidth hidden">250</div>
				<div class="thumbHeight hidden">188</div>
				<a id="item1" class="lightwindow hidden" title="Opéra de Paris" rel="gal[cat]" href="slides/P1000223.JPG"></a>
        </div>
		<div class="item" style="display: none; left: 675px; top: 108.813px; height: 282px; width: 250px; font-size: 100%; z-index: 32768; visibility: visible;">
	      <canvas class="content hidden landscape" src="thumbs/P1060347.JPG" alt="Tour Eiffel" origproportion="1.3266666666666667" width="398" height="450"></canvas>
				<div class="ref hidden">item2</div>
			<div class="caption">Tour Eiffel</div>
				<div class="comment hidden"></div>
				<div class="author hidden">Copyright 2010</div>
				<div class="params...

CSS

body{
    font-size: 10pt;
    font-family: sans-serif;
    margin: 0;
    padding: 0; 
    background-color: #ffffff;
    color: #999999;
}
.clear {
	 clear: both; 
}
.hidden {
    display: none;
}
.centeredContent{
    margin: 0 auto;
    display: block;
    text-align: center;
    vertical-align: middle;
}
.topBottomMargin {
    margin-top: 10px;
    margin-bottom: 10px;
}
.folderDescription{
    text-align: justify;
    width: 50%;
}
.smallFont{
		font-size: 75%;
}
img {
	border: none; 
}
a,
a:link,
a:visited,
a:active,
a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:link{
    color: #ff6633;
}
a:visited{
    color: #ff6633;
}
a:hover{
    color: #ff6633;
}
a:active{
    color: #ff6633;
}
.ContentFlow .globalCaption .caption {
    color: #999999;  
}

.ContentFlow .flow {
    width: 100%;/*needed only for IE7*/
}

.ContentFlow .flow * {
}

.ContentFlow .scrollbar {
    border-bottom:1px solid #ff6633;
    color: #999999;
    width: 50%;
}
.ContentFlow .loadIndicator{
    background: #ffffff;
}

#lightwindow_contents {
        border: 10px solid #ffffff;
        background-color: #ffffff;
}   
 
#lightwindow_data_slide_inner {
        background-color: #ffffff;
}


div.art-nav-center
{
	position:relative;
	float:right; 
	right:50%;
	margin: 0;
	padding: 0;
}

ul.art-menu
{
	position:relative;
	float:left; 
	left:50%;
	padding: 0;
}

.art-menu li
{
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	position: relative;
}

.art-menu a
{
	position:relative;
	display: block;
	overflow:hidden;
	height: 38px;
	cursor: pointer;
	text-decoration: none;
	margin-right: 4px;
	margin-left: 4px;
	font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, Serif;
	font-size: 20px;
	font-style: normal;
	font-weight: bold;
	color: #ff6633;
	padding: 0 22px;
	margin: 0 1px;
	line-height: 38px;
	text-align: center;
}

.art-menu li:hover a 
{
	color: #ff6633;
}

.art-menu a.active 
{
	color:...

JavaScript

var startItem = getParam('p');
	if(startItem == "") startItem = "center";
	if(startItem.isNaN) startItem = "'"+startItem+"'";
	var CF_slideshow_startOnLoad = false;
	var CF_slideshow_showButtons = true;
	var CF_slideshow_duration = 2000;
	
	var CF_slideshow_playTxt = "start slideshow";
	var CF_slideshow_pauseTxt = "stop slideshow";
	var CF_slideshow_fasterTxt = "speed up slideshow";
	var CF_slideshow_slowerTxt = "slow down slideshow";
	
	
	var myContenFlow = new ContentFlow('contentFlow', {
		reflectionColor: "#ffffff",
		flowSpeedFactor: 1,
		reflectionHeight: 0.5,
		endOpacity: 1,
		startItem: startItem,
		circularFlow: true,
		stretchThumbs: false
	});

					
	function lightWindowInit() {
		LightFlowGlobal.myLightWindow = new lightwindow({
			rootPath: "res/lightwindow/",
			albumRootPath: ".",
			loadingTxt: "loading or ",
			cancelTxt: "cancel",
			playTxt: "start slideshow",
			stopTxt: "stop slideshow",
			slowerTxt: "slower by 1 second",
			fasterTxt: "faster by 1 second",
			downloadSlideTxt: "Download",
			downloadSlide: false,
			downloadLinking: "LinkScaled",
			cartSlideTxt: "Purchase",
			cartSlide: false,
			cartAlert: "Works only when album is uploaded!",
			cartFotomoto: false,
			showSlideshow: true,
			slideshowDuration: 5000,
			circular: true,
			animationDuration: 0.25,
			syncGalleryWithSlide: false
			});
		try{
			if(top) top.loadNext();
		}catch(e){};
	}
	LightFlowGlobal.readyJS=true;
	LightFlowGlobal.cartAlert="Works only when album is uploaded!";
	var rootPath = ".";
	
	function showCart(slideSrcPath){
		showSmartCart(slideSrcPath);
	}
	
	function showSmartCart(i){
			LightFlowGlobal.myLightWindow.activateWindow({
			href: "./smartCart.html#" + i.substring(i.lastIndexOf("/")+1, i.lastIndexOf(".")), 
			type: "external",
			title: "Purchase", 
			width: 700
			
		});
	}
  var sc_project=5407836; 
var sc_invisible=1; 
var sc_partition=47; 
var sc_click_stat=1; 
var sc_security="d5ecc5e9"; 
class="statcounter"><a title="counter for...