JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rokopf.de/rokopf/themes/Newstyler/js/jquery.tools.min.js"></script>
<div id="postcontainer" style="position: relative; height: 395px; " class="masoned">
    
            <div class="post sticky" id="sticky" style="position: absolute; left: 0px; top: 30px; ">
            <h2>Über Rokopf</h2>
            <p>            </p><p><img class="aligncenter size-full wp-image-684" title="Rokopf Urban" src="http://rokopf.de/rokopf/uploads/2012/08/aboutrokopf11.jpg" alt="" width="300" height="167">Rokopf ist ein Fotograf aus Berlin. Zu seinem Faible zählt die Konzertfotografie. Neben urbanen Motiven gilt seine Liebe generell dem perspektivischen Fotografieren, stets auf der Suche nach dem Besonderen im Kleinen. Als Cineast ist er unter anderem auch involviert in Aufnahme und Editing verschiedener Musikvideos und Kurzfilme.</p>
<p></p>
          </div>        
                
        
        
                  
    <div class="post life" id="post-1" rel="#overlay-1" style="position: absolute; left: 327px; top: 30px; ">          
      <a class="postlink life" href="#" target="_self" rel="#overlay-1">
                    <span class="thumbcontainer" style="width: 105px; height: 69px;">
               <img class="thb" src="http://rokopf.de/rokopf/uploads/2012/08/Blick-auf-den-Alex-Frankfurter-Allee-105x69.jpg" width="105" height="69" rel="#overlay-1">
              </span>   
                    </a>
    </div>
    
    
    
      <div class="overlay qfoverlay" id="overlay-1"><a class="close"></a>
              <div class="next" style=""><span class="next" style="">next</span></div>
              <div class="prev" style=""><span class="prev" style="">prev</span></div>
              
                <div class="imghover"><img width="650" height="433" src="http://rokopf.de/rokopf/uploads/2012/08/Blick-auf-den-Alex-Frankfurter-Allee.jpg" class="qffsimage wp-post-image" alt="Blick auf den Alex, Frankfurter Allee" title="">     
                   <div...

CSS

.invis{ visibility: hidden; }


html {
 padding-bottom: 0px;
 font-family: 'Oswald', arial, serif;
 margin: 0px auto;
 
 height: 100% /* Fuer den Footerscheiss */
} * html #main {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Oswald', arial, serif;
margin: 0px auto;

} body {
 margin: 0px auto;
 
 
} span.backgroundbild img {
 position: fixed;
 display: block;
 z-index: 0;
 top: 0px;
 left: 0px;
 width: 99.9%;
 height: auto;

 
/*##################################################################################
/*#################                                       ##########################
/*#################         M A I N L A Y O U T           ##########################
/*#################                                       ##########################
/*################################################################################## 
*/
 
} div#main {
 display: block;
 background: transparent;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 min-height: 100%;
 text-align: left;
 padding-top: 0px;
 padding-bottom: 0px;
 margin: 0px auto
  
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;


} div.header {
 background: url('../images/hbg.jpg') repeat;
 display: block;
 position: absolute;
 top: 0px;
 left: 0px;
 width: 100%;
 margin: 0px auto;
 padding: 0px; 
  height: 100px;
  transition: height .5s;
  -moz-transition: height .5s; /* Firefox 4 */
  -webkit-transition: height .5s; /* Safari and Chrome */
  -o-transition: height .5s; /* Opera */
  opacity: 0.97; /*gute Browser*/
  -moz-opacity: 0.97; /*fr�he Feuerf�chse*/
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97)"; /*IE 8*/
    filter: alpha(opacity=97); /*IE 5-7*/
  -khtml-opacity: 0.97; /*Safari 1.X*/
  overflow: hidden;
  z-index: 100;
  -moz-box-shadow:    0px 5px 5px #000;
  -webkit-box-shadow: 0px 5px 5px #000;
  box-shadow:         0px 5px 5px #000;
...

JavaScript

$j = jQuery;
$j(function (){
    var overlay = $j('.overlay'),
        thb = $j('.postlink'),
        btn_next = $j('div.next'),
        btn_prev = $j('div.prev'),
        index = 0,
        max = thb.parent().index(),
        min = 1,
        fadeSpeed = 250;
    
    $j(".post > a[rel]").overlay({
        effect: 'apple',
    mask: {
     color: '#f9f9f9',
     loadSpeed: 250,
     opacity: 0.96
    }
    });
    btn_next.click(function (){
        $('#exposeMask').remove();
        if(index==max) $j(this).hide();
        $j(this).closest(overlay).fadeOut(fadeSpeed, function () {
            var next = $(this).next();
            //ist das nächste Element invis?
            if(next.hasClass('invis')) {
                next.next().next().find(thb).trigger('click');
            } else {
                next.find(thb).trigger('click');
            }
        });
        
    });
    btn_prev.click(function (){
        $('#exposeMask').remove();
        if(index==min) $j(this).hide();
        $j(this).closest(overlay).fadeOut(fadeSpeed, function (){
            var prev = $(this).prev().prev().prev();
            //ist das vorherige Element invis?
            if(prev.hasClass('invis')) {
                prev.prev().prev().find(thb).trigger('click')
            } else {
                prev.find(thb).trigger('click')
            }
        });
        
    });        
    thb.click(function (){    
         
        index = $j(this).parent('.post').index(); 
    
        btn_next.show(); 
        btn_prev.show();       
        if(index==max){ 
            overlay.find(btn_next).hide() 
        } else { 
            overlay.find(btn_next).show() 
            index==min?overlay.find(btn_prev).hide():overlay.find(btn_prev).show();         
        } 
     
        return false; 
    });  
});