JSFiddle - React, Tailwind, and code Playground

by manoj dhiman

HTML

<ul class="rudra-portfolio-filter"> <li class="all"><a href="#">All</a></li> <li class="net"><a href="#">.net</a></li><li class="android"><a href="#">android</a></li><li class="php current"><a href="#">php</a></li></ul>

<ul id="portfolio-grid" class="rudra-portfolio block-grid four-up mobile">
                                                                            <li class="port-li" data-type="android " data-id="id-check-in">
                          <article id="post-26" class="post-26 rudra-portfolio type-rudra-portfolio status-publish has-post-thumbnail hentry rudra-portfolio-item">
                            	<div class="overeffect rudra-portfolio-item-link">
                            		<div class="image">
                                		                                		    <img width="290" height="210" src="http://localhost/rudraplugins/wp-content/uploads/2015/03/534bdbea41d183-290x210.jpg" class="attachment-rudra-portfolio-medium wp-post-image" alt="534bdbea41d183">                                		                                       
                            		</div>
                            		<div class="content-wrapper">
                            			<h3>check in</h3>
                         				<div class="information">
                            				<p>check in an android application to inform your buddies about your location</p>
                            			</div>
                            			                            			<a target="_blank" class="link" href="
Notice: Undefined offset: 0 in /var/www/rudraplugins/wp-content/plugins/Rudra-portfolio/templates/rudra-prtfolio-filterable.php on line 52
">Open Website</a>
                            				
                            		 	
                            		</div>  
                            	</div>
                            
                          </article>
                      </li>

                                        <li class="port-li" data-type="net "...

CSS

/* Requires: normalize.css */
/* Global Reset & Standards ---------------------- */

article.rudra-portfolio .text{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.animate-on-hover .image {
  position: relative;
}
.animate-on-hover .image img {
  display: block;
}
.animate-on-hover .image .shadow-overlay {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.01) inset;
  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0.01) inset;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.01) inset;
}

.ie8 .animate-on-hover .image .shadow-overlay {
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ie8 .animate-on-hover .image .shadow-overlay:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}


/* The Grid ---------------------- */
.rudra-row, .rudra-columns, .block-grid, .block-grid > li {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.rudra-row {
  max-width: 100%;
  margin: 0 auto;
}
.rudra-row .rudra-row {
  width: auto;
  max-width: none;
  margin: 0 -10px;
}
.rudra-row.rudra-collapse .rudra-column, .rudra-row.rudra-collapse .rudra-columns {
  padding: 0;
}
.rudra-row .rudra-row {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0 -10px;
}
.rudra-row .rudra-row.rudra-collapse {
  margin: 0;
}

.rudra-column, .rudra-columns {
  float: left;
  min-height: 1px;
  padding: 0 10px;
  position: relative;
}
.rudra-column.centered, .rudra-columns.centered {
  float: none;
  margin: 0 auto;
}

[class*="rudra-column"] + [class*="rudra-column"]:last-child {
  float: right;
}

[class*="rudra-column"] + [class*="rudra-column"].end {
  float: left;
}

.rudra-one, .rudra-row .rudra-one {
  width: 4.16667%;
}

.rudra-two, .rudra-row .rudra-two {
  width: 8.33333%;
}

.rudra-three, .rudra-row .rudra-three {
  width: 12.5%;
}

.rudra-four,...

JavaScript

/* Scroll to Top Button */
jQuery(document).ready(function() {

    // Animate Box Shadow on some elements
    // Add the overlay. We don't need it in HTML so we create it here
    
    

    // Clone portfolio items to get a second collection for Quicksand plugin
    var $portfolioClone = jQuery(".rudra-portfolio").clone();

    // Attempt to call Quicksand on every click event handler
    jQuery(".rudra-portfolio-filter a").click(function(e) {

        jQuery(".rudra-portfolio-filter li").removeClass("current");

        // Get the class attribute value of the clicked link
        var $filterClass = jQuery(this).parent().attr("class");

        if ($filterClass == "all") {
            var $filteredPortfolio = $portfolioClone.find("li");
        } else {
            var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
        }

        // Call quicksand
        jQuery("ul.rudra-portfolio").quicksand($filteredPortfolio, {
            duration: 500,
            easing: 'easeInOutQuad'
        });

        jQuery(this).parent().addClass("current");

        // Prevent the browser jump to the link anchor
        e.preventDefault();
    })
    jQuery(".port-li").click(function() {
       
			jQuery(this).find('.content-wrapper').slideDown();
    });
    
    jQuery(".overeffect").mouseover(function() {
        jQuery(this).find('.content-wrapper').slideDown();
			
    });



    jQuery("#portfolio-grid li").mouseleave(function() {
        jQuery('.content-wrapper').slideUp(500);
 
    });

});