JSFiddle - React, Tailwind, and code Playground

by tightman

HTML

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://hannemann-media.ch/clients/mediaag_tmp/wp-content/themes/mediaag/js/isotope.pkgd.min.js" type="text/javascript"></script>
<script>
    $(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });
 
    $('.content-separator input').click(function(){
        $('.content-separator .current').removeClass('current');
        $(this).addClass('current');
 
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    }); 
});
</script>

<div class="content-separator">
 
    <form>
        <input type="submit" href="#" data-filter="*" class="current" value="All Categories" />
    </form>
    <form>
        <input type="submit" href="#" data-filter=".people" value="People" />
    </form>
    <input type="submit" href="#" data-filter=".places" value="Places" />
    <input type="submit" href="#" data-filter=".food" value="Food" />
    <input type="submit" href="#" data-filter=".objects" value="Objects" />
 
</div>
 
<div class="portfolioContainer">
 
    <div class="objects">
        <img src="http://www.9bitstudios.com/demos/blog/jquery-isotope/images/watch.jpg" alt="image" />
    </div>
 
    <div class="people places">
        <img src="http://www.9bitstudios.com/demos/blog/jquery-isotope/images/surf.jpg" alt="image" />
    </div>    
 
    <div class="food">
        <img src="http://www.9bitstudios.com/demos/blog/jquery-isotope/images/burger.jpg" alt="image" />
    </div>
     
    <div class="people places">
        <img...

CSS

body {
    font-family: Arial;
}
.content-separator-wrapper {
	height: 90px;
	position: relative;
	max-width: 1440px;
	background-color: #04161C;
	margin: 0 auto;
}
.content-separator {
	margin: 0 auto;
	padding: 0 30px;
}
.content-separator form input { 
    margin-right: 10px; 
    color:#666;
    text-decoration:none;
}
 
.content-separator .current { 
    background: red;
}
 
img {
    margin:5px;
}
 
.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
 
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}
.footer {
    width: 100%;
    height: 150px;
    background: black;
}