JSFiddle - React, Tailwind, and code Playground

by Gautam

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css">
 <section id="portfolio" class="container">
        <ul class="portfolio-filter">
            <li><a class="btn btn-default active" href="#" data-filter="*">All</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".bootstrap">Bootstrap</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".html">HTML</a></li>
            <li><a class="btn btn-default" href="#" data-filter=".wordpress">Wordpress</a></li>
        </ul><!--/#portfolio-filter-->

        <ul class="portfolio-items col-3">
            <li class="portfolio-item apps">
                <div class="item-inner">
                    <img src="http://goo.gl/1hE18x" alt="">
                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
                        <a class="preview btn btn-danger" href="http://goo.gl/1hE18x" rel="prettyPhoto"><i class="icon-eye-open"></i></a>             
                    </div>           
                </div>           
            </li><!--/.portfolio-item-->
            <li class="portfolio-item joomla bootstrap">
                <div class="item-inner">
                    <img src="http://goo.gl/1hE18x" alt="">
                    <h5>Lorem ipsum dolor sit amet</h5>
                    <div class="overlay">
        ...

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  padding-top: 80px;
  color: #34495e;
  background: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
a {
  color: #34495e;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}
hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}
.btn {
  font-weight: 400;
}
.btn-transparent {
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
}
.btn-transparent:hover {
  border-color: rgba(255, 255, 255, 0.5);
}
a:hover,
a:focus {
  color: #d9534f;
  text-decoration: none;
  outline: none;
}
.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}
body > section {
  padding: 50px 0;
}
.turquoise,
.green-sea,
.sun-flower,
.orange,
.emerald,
.nephrits,
.carrot,
.pumkin,
.peter-river,
.belize-hole,
.alizarin,
.pomegranate,
.amethyst,
.wisteria,
.clouds .silver,
.wet-asphalt,
.midnight-blue,
.concrete,
.asbestos {
  color: #fff;
}
.turquoise h1,
.green-sea h1,
.sun-flower h1,
.orange h1,
.emerald h1,
.nephrits h1,
.carrot h1,
.pumkin h1,
.peter-river h1,
.belize-hole h1,
.alizarin h1,
.pomegranate h1,
.amethyst h1,
.wisteria h1,
.clouds .silver h1,
.wet-asphalt h1,
.midnight-blue h1,
.concrete h1,
.asbestos h1,
.turquoise h2,
.green-sea h2,
.sun-flower h2,
.orange h2,
.emerald h2,
.nephrits h2,
.carrot h2,
.pumkin h2,
.peter-river h2,
.belize-hole h2,
.alizarin h2,
.pomegranate...

JavaScript

$(window).load(function(){
		$portfolio_selectors = $('.portfolio-filter >li>a');
		if($portfolio_selectors!='undefined'){
			$portfolio = $('.portfolio-items');
			$portfolio.isotope({
				itemSelector : 'li',
				layoutMode : 'fitRows'
			});
			$portfolio_selectors.on('click', function(){
				$portfolio_selectors.removeClass('active');
				$(this).addClass('active');
				var selector = $(this).attr('data-filter');
				$portfolio.isotope({ filter: selector });
				return false;
			});
		}
	});