JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div class="post" id="post0">          
    <a class="postlink" href="#" target="_self" rel="#overlay-0">
        
        <span class="thumbcontainer">
        <img src="#" width="100" rel="#overlay-0" />
        </span>   
    </a>
</div>
<div class="post" id="post1">          
    <a class="postlink" href="#" target="_self" rel="#overlay-1">
        
        <span class="thumbcontainer">
        <img src="#" width="100" rel="#overlay-1" />
        </span>   
    </a>
</div>
<div class="post" id="post2">          
    <a class="postlink" href="#" target="_self" rel="#overlay-2">
        
        <span class="thumbcontainer">
        <img src="#" width="100" rel="#overlay-2" />
        </span>   
    </a>
</div>



<div class="overlay" id="overlay-0">
    <div class="items">
          <div class="next">NEXT</div>
          <div class="prev">ZURÜCK</div>
    </div>  
    <div class="imghover">
        <img src="" class="image" />
        <div class="details">
            <h4>Text1</h4><br />
            
            <h1>Titel1</h1>
            <div class="content">Text1</div>
        </div>
    </div>
</div>
<div class="overlay" id="overlay-1">
    <div class="items">
          <div class="next">NEXT</div>
          <div class="prev">ZURÜCK</div>
    </div>  
    <div class="imghover">
        <img src="" class="image" />
        <div class="details">
            <h4>Text2</h4><br />
            
            <h1>Titel2</h1>
            <div class="content">Text2</div>
        </div>
    </div>
</div>
        
<div class="overlay" id="overlay-2">
    <div class="items">
          <div class="next">NEXT</div>
          <div class="prev">ZURÜCK</div>
    </div>  
    <div class="imghover">
        <img src="" class="image" />
        <div class="details">
            <h4>Text3</h4><br />
            
            <h1>Titel3</h1>
            <div class="content">Text3</div>
        </div>
    </div>
</div>

CSS

/* the overlayed element */
.overlay {
 
    /* must be initially hidden */
    display:none;
 
    /* place overlay on top of other elements */
    z-index:10000;
 
    /* styling */
    background-color:#333;
 
    width:675px;
    min-height:200px;
    border:1px solid #666;
 
    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.overlay .close {
    background-image:url(http://jquerytools.org/media/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}
  /* styling for elements inside overlay */
  .imghover{
  position:absolute;
  top:15px;
  right:15px;
  font-size:11px;
  color:#fff;
  width:150px;
  }
 
  .imghoverh3 {
  color:#aba;
  font-size:15px;
  }
.items{ 
    position: absolute; 
    right: 320px;
    top: -25px;    
    background-color: #555; 
    height: 15px; 
    width: 50px;
    line-height: 15px; 
    padding: 5px; 
    border: 1px solid #222;
    border-radius: 5px;
}
.next { margin-left: 30px; }
.prev { float: left;}
.prev:hover, .next:hover { cursor: pointer; text-decoration: underline;}
.thb:hover { cursor: pointer; }

JavaScript

/**
 * @license 
 * jQuery Tools @VERSION Overlay - Overlay base. Extend it.
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/overlay/
 *
 * Since: March 2008
 * Date: @DATE 
 */
(function($) { 

    // static constructs
    $.tools = $.tools || {version: '@VERSION'};

    $.tools.overlay = {

        addEffect: function(name, loadFn, closeFn) {
            effects[name] = [loadFn, closeFn];    
        },

        conf: {  
            close: null,    
            closeOnClick: true,
            closeOnEsc: true,            
            closeSpeed: 'fast',
            effect: 'default',

            // since 1.2. fixed positioning not supported by IE6
            fixed: !$.browser.msie || $.browser.version > 6, 

            left: 'center',        
            load: false, // 1.2
            mask: null,  
            oneInstance: true,
            speed: 'normal',
            target: null, // target element to be overlayed. by default taken from [rel]
            top: '10%'
        }
    };


    var instances = [], effects = {};

    // the default effect. nice and easy!
    $.tools.overlay.addEffect('default', 

        /* 
            onLoad/onClose functions must be called otherwise none of the 
            user supplied callback methods won't be called
        */
        function(pos, onLoad) {

            var conf = this.getConf(),
                 w = $(window);                 

            if (!conf.fixed)  {
                pos.top += w.scrollTop();
                pos.left += w.scrollLeft();
            } 

            pos.position = conf.fixed ? 'fixed' : 'absolute';
            this.getOverlay().css(pos).fadeIn(conf.speed, onLoad); 

        }, function(onClose) {
            this.getOverlay().fadeOut(this.getConf().closeSpeed, onClose);             
        }        
    );        


    function Overlay(trigger, conf) {        

        // private variables
        var self = this,
             fire =...