JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6035/jquery.flexslider-min.js"></script>
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6035/grid.css">
<script src="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6035/flexslider.css">
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/6035/icomoon-uikit-feb.css">
<div class="container">
  <div class="grid_12 heading">
    <h3>Button Navigation</h3>
  </div>
  <nav class="nav btn-navbar grid_12"> 
    <ul>
       <li><a href="#" class="btn active">All</a></li>
       <li><a href="#" class="btn">Photography</a></li>
       <li><a href="#" class="btn">Inspirations</a></li>
       <li><a href="#" class="btn">Illustrations</a></li>
     </ul>
  </nav>
  <div class="grid_12 heading">
    <h3>Portfolio / Product Posts</h3>
  </div>
  <div class="grid_12">
    <div class="inner_container">
      <div class="col_1of3">
        <article class="post">
          <a href="#" class="post-image">
            <img src="http://placehold.it/400x200/efefef" />
          </a>
          <div class="details">
            <div class="actions">
              <a href="#" class="btn btn-secondary btn-round">
                <span class="icon-search"></span>
              </a>           
            </div>
            <h2><a href="#">Scarabaeidae</a></h2>
            <p>Rezonum & Collectoris</p>
            <div class="intents">
              <span class="icon-heart"></span>
              <span class="count">678</span>
            </div>
          </div>
        </article>
      </div>
      <div class="col_1of3">
        <article class="post">
          <a href="#" class="post-image">
            <img src="http://placehold.it/400x200/efefef" />
          </a>
          <div class="details">
   ...

CSS

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: sub;
}

a {
  text-decoration: none;
  color: rgba(105, 105, 105, 0.88);
  transition: color .3s ease;
}
a:hover {
  color: #fc6e51;
}

body {
  font-family: 'Open Sans', sans-serif;
  background: #f9f9f9;
}

.flexslider {
  border: none;
  box-shadow: none;
}

.flex-direction-nav a {
  background: url(http://flexslider.woothemes.com/images/bg_direction_nav.png) no-repeat 0 0;
  width: 30px;
  height: 30px;
  margin: -20px 0 0;
  display: block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  text-indent: -9999px;
  opacity: 0;
  -webkit-transition: all .3s ease;
}
.flex-direction-nav a:before {
  content: '';
}

.flex-direction-nav .flex-next {
  background-position: 100% 0;
  right: -36px;
  text-align: left;
}
.flex-direction-nav .flex-next:before {
  content: '';
}

.heading h3 {
  font-weight: 300;
  color: #888888;
}

.nav ul {
  margin: 0;
  padding: 0;
}
.nav li {
  list-style: none;
  margin: 0;
}

.btn-navbar {
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn-navbar li {
  float: left;
  margin: 0 5px;
}
.btn-navbar li:first-child {
  margin-left: 0;
}

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: #f2f2f2;
  border-radius: 3px;
  font-size: 0.8125em;
  color: #b9bcbc;
  transition: background .3s ease, color .3s ease;
}
.btn:hover {
  background: #e5e5e5;
  color: #929797;
}
.btn.btn-primary {
  background: #a1d36e;
  color: #fff;
}
.btn.btn-primary:hover, .btn.btn-primary.active {
  background: #94cd5a;
}
.btn.btn-secondary {
  background: #6ad1dd;
  color: #fff;
}
.btn.btn-secondary:hover, .btn.btn-secondary.active {
  background: #55cbd8;
}
.btn.btn-tertiary {
  background: #fc6e51;
  color: #fff;
}
.btn.btn-tertiary:hover, .btn.btn-tertiary.active {
  background: #fc5938;
}
.btn.btn-quaternary {
  background: #48cfad;
  color: #fff;
}
.btn.btn-quaternary:hover, .btn.btn-quaternary.active {
  background: #35c9a4;
}
.btn.btn-white...

JavaScript

$(document).ready(function(){
  $('.flexslider').flexslider({
    controlNav: false
  });  
});