JSFiddle - React, Tailwind, and code Playground
HTML
<section id="content">
<div class="container_16">
<div class="wrapper">
<div class="grid_16">
<h2 class="padd-2">our portfolio</h2>
</div>
<div class="grid_16">
<div class="main-cycle">
<a id="prev2"></a>
<a id="next2"></a>
<div class="cycle-div">
<div>
<div class="grid_8 marg-left-0">
<a href="foto/pauline/euVuOJ9Sch0.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"><img src="foto/pauline/01in.jpg" alt=""></a>
</div>
<div class="grid_8 marg-right-0">
<a href="foto/pauline/01inf-333x500.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"></a>
</div>
<div class="clear"></div>
<div class="grid_8 marg-left-0">
<a href="foto/pauline/un18bplQ_68.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"></a>
</div>
<div class="grid_8 marg-right-0">
<a href="foto/pauline/aAj04qjrjuo.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"></a>
</div>
<div class="grid_8 marg-left-0">
<a href="foto/pauline/YPM-P4L8xGU.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"></a>
</div>
<div class="grid_8 marg-right-0">
<a href="foto/pauline/YwZU9m30BMU.jpg" class="lightbox-image bot-1" data-gal="prettyPhoto[2]"></a>
...
CSS
@import url(http://fonts.googleapis.com/css?family=Six+Caps);/*font-family: 'Six Caps', sans-serif;*/
@import url(http://fonts.googleapis.com/css?family=Simonetta);/*font-family: 'Simonetta', cursive;*/
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}
/* Global properties ======================================================== */
html, body {width:100%; padding:0; margin:0; height:100%;}
body {font-family: Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#919191;
background:#fff;
min-width:1060px;}
.main{width:100%;height: auto; min-height:100%;background: url(../images/bg-body.jpg) center 0 repeat;padding-bottom:20px;}
/***********************************************************************/
/*================================>Block-classes<==========================*/
.txt-dec-n{text-decoration:none !important;}
.txt-dec-u{text-decoration: underline;}
.txt-up-n{text-transform:none !important;}
.txt-up{text-transform:uppercase;}
.txt-al{text-align:center;}
.bold{font-weight:bold;}
.font-13{font-size:13px;color:#919191;}
.color{color:#ec7898;}
.color-1{color:#919191;}
.hov:hover{color:#000;}
.hov-1:hover{color:#ec7898;}
.border-none{border: none !important;}
.bg-none{background: none !important;}
.dis-block{display: block;}
.dis-inblock{display: inline-block;}
.marg-left-0{margin-left:0 !important;}
.marg-right-0{margin-right:0 !important;}
.marg-left-right-0{margin-left:0 !important; margin-right:0 !important;}
.last-mbot{margin-bottom:0 !important;}
.last-pbot{padding-bottom: 0 !important;}
.last-mpbot{margin-bottom:0 !important;padding-bottom:0 !important;}
/*===============================>Indent<==================================*/
.padd{margin:22px 0 10px 0;}
.padd-0{margin:22px 0 17px...
JavaScript
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.hoverIntent.minified.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<script>
$(window).load(function(){
$('.cycle-div').cycle({
fx: 'scrollHorz',
speed: 600,
timeout: 0,
next: '#next2',
prev: '#prev2'
});
$(function(){
$('.lightbox-image').prettyPhoto({theme:'facebook',autoplay_slideshow:false,social_tools:false,animation_speed:'normal'}).append('<span></span>').hover(function(){$(this).find('>img').stop().animate({opacity:.5})},function(){$(this).find('>img').stop().animate({opacity:1})})
});
$().UItoTop({ easingType: 'easeOutQuart' });
})
</script>