JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<ul class="grid grid-4-col clearfix">
        <li id="post-265" class="post-265 portfolio type-portfolio status-publish hentry">
        <a href="http://themes.zlatanblog.com/simon/portfolio/browser-cookie/" class="plink">
            <img src="http://themes.zlatanblog.com/simon/wp-content/uploads/2012/10/Fullview-480x312.png" alt="thumb"/>
            <div class="thumb">
                <h1>Browser Cookie</h1>
                <ul>
                    <li>Photoshop, Design</li><li>24 / 6 / 2012</li><li>Ollin</li>                </ul>
                <span class="eye" portfolio-link="http://themes.zlatanblog.com/simon/portfolio/browser-cookie/"></span>
                <span class="eye-load">Loading...</span>
            </div>
        </a>
    </li>
        <li id="post-262" class="post-262 portfolio type-portfolio status-publish hentry">
        <a href="http://themes.zlatanblog.com/simon/portfolio/alphabetic/" class="plink">
            <img src="http://themes.zlatanblog.com/simon/wp-content/uploads/2012/10/alpha.jpg" alt="thumb"/>
            <div class="thumb">
                <h1>ALPHABETIC</h1>
                <ul>
                    <li>Animation, Video</li><li>6 / 4 / 2012</li><li>Ariel Costa</li>                </ul>
                <span class="eye" portfolio-link="http://themes.zlatanblog.com/simon/portfolio/alphabetic/"></span>
                <span class="eye-load">Loading...</span>
            </div>
        </a>
    </li>
        <li id="post-259" class="post-259 portfolio type-portfolio status-publish hentry">
        <a href="http://themes.zlatanblog.com/simon/portfolio/button-style-sheet/" class="plink">
            <img src="http://themes.zlatanblog.com/simon/wp-content/uploads/2012/10/real_pixelss-480x312.jpg" alt="thumb"/>
            <div class="thumb">
                <h1>Button Style Sheet</h1>
                <ul>
                    <li>Web design, Interface</li><li>28 / 6 / 2012</li><li>Bill S Kenney</li>                </ul>
          ...

CSS

/* --Grid Portfolio--
================================================*/

.grid {
     position: relative;
}

.grid > li {
     background: none repeat scroll 0% 0% #FFFFFF;
     float: left;
     position: relative;
     max-width:480px;
}

.grid-4-col > li{
    width:25%;
}

.grid a {
     display: block;
     float: left;
     font-size: 0px;
     overflow: hidden;
     position: relative;
     width: 100%;
}

.grid a img {
     max-height: 100%;
     max-width: 100%;
}

.grid li a div {
     background: none repeat scroll 0% 0% #00A8E1;
     height: 100%;
     position: absolute;
     width: 100%;
}

.grid-4-col a h1 {
     font-size: 20px;
     margin: 14px 20px 20px 20px;
}

.grid a ul {
     bottom: 15px;
     margin-left: 20px;
     position: absolute;
}

.grid-4-col a ul li {
     font-size: 11px;
     line-height: 23px;
}


/*---Hoverdir---*/

.grid li a div.da-animate {
     -moz-transition: all 0.3s ease-in-out 0s ;
     -webkit-transition: all 0.3s ease-in-out 0s ;
     -o-transition: all 0.3s ease-in-out 0s ;
     -ms-transition: all 0.3s ease-in-out 0s ;
     transition: all 0.3s ease-in-out 0s ;
}

.da-slideFromTop {
     left: 0px;
     top: -100%;
}

.da-slideFromBottom {
     left: 0px;
     top: 100%;
}

.da-slideFromLeft {
     left: -100%;
     top: 0px;
}

.da-slideFromRight {
     left: 100%;
     top: 0px;
}

.da-slideTop {
     top: 0px;
}

.da-slideLeft {
     left: 0px;
}

JavaScript

(function( $, undefined ) {
        
    /*
     * HoverDir object.
     */
    $.HoverDir                 = function( options, element ) {
    
        this.$el    = $( element );
        
        this._init( options );
        
    };
    
    $.HoverDir.defaults     = {
        hoverDelay    : 0,
        reverse        : false
    };
    
    $.HoverDir.prototype     = {
        _init                 : function( options ) {
            
            this.options         = $.extend( true, {}, $.HoverDir.defaults, options );
            
            // load the events
            this._loadEvents();
            
        },
        _loadEvents            : function() {
            
            var _self = this;
            
            this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
                
                var $el            = $(this),
                    evType        = event.type,
                    $hoverElem    = $el.find( 'div' ),
                    direction    = _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
                    hoverClasses= _self._getClasses( direction );
                
                $hoverElem.removeClass();
                
                if( evType === 'mouseenter' ) {
                    
                    $hoverElem.hide().addClass( hoverClasses.from );
                    
                    clearTimeout( _self.tmhover );
                    
                    _self.tmhover    = setTimeout( function() {
                        
                        $hoverElem.show( 0, function() {
                            $(this).addClass( 'da-animate' ).addClass( hoverClasses.to );
                        } );
                        
                    
                    }, _self.options.hoverDelay );
                    
                }
                else {
                
                    $hoverElem.addClass( 'da-animate' );
                    
                   ...