JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="http://galnova.com/2015/js/instafeed.min.js"></script>
<div id="instafeed" class="row nill"></div>

CSS

body {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  font-weight: normal;
  width: 100%;
  overflow-x: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  padding: 0;
  background-color: #eee;
  background-position: center top;
  background-repeat: repeat-y;
}

a {
  color: #fff;
}

a:hover {
  color: #000;
}

.btn a:hover { color: yellow; }

a.alte,
a.alte:hover {
  color: #a94442;
}

.largo {
  font-size: 1.25em;
}

.index .col-sm-8 a,
.tab-content a {
  font-weight: bold;
  color: #f5822e!important;
}

.index .col-sm-8 a:hover,
.tab-content a:hover {
  color: #4e5c78!important;
}

div,
table,
span,
a {
  padding: 0;
  margin: 0;
  border: 0;
}

.blu {
  color: #4e5c78;
}

p {
  margin: 0!important;
}

.gonzo {
  padding: 8px!important;
}

.toggleAll {
  max-height: 40px;
  margin-top: 10px;
}

.in_content {
  margin-top: 15px;
}

.header {
  position: fixed;
  width: 100%;
  height: 52px;
  margin: auto;
  z-index: 50;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+42,4e5c78+100 */
  background: #000000;
  /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background:...

JavaScript

$(function(){
	
var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token
	
  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
    $.each(insta.data,function (photos,src) {
      if ( photos === 200 ) { return false; }
		var date = new Date(parseInt(this.created_time) * 1000);
		 // template
      $(
		  
		'<div class="col-sm-6 col-md-4 col-lg-2 grip_wrap gonzo">' +
		'<div class="grip_hang_topp"></div>' +
		'<div class="col grip">' +
		
		'<a title="' + this.caption.text + '" class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
		'<img src="' + this.images.thumbnail.url + '" />' +
		'</a>' +
        '<div class="col coat2 truncate">' + this.caption.text + '</div>' +
		'<div class="row nill">' +
	    '<span class="col-sm-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
	    '<span class="col-sm-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
		'</div>' +
		'<span class="col check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
        '<a href="' + this.link + '" target="_blank"><button class="col-12 btn btn-secondary">View in Instagram</button></a>' +
		'</div>' +
		  
		'<div class="grip_hang_bott"></div>' +
        '</div>'

      ).appendTo('#instafeed');
    }); 
$(".grip").hover(function(e){
	"use strict";
    e.preventDefault();
    if ($(window).width() > 991) {

        $(this).find(".fa-heart, .fa-comment, .fa-check, .btn, img").toggleClass("pls");

        return false;
    }
});
  
  });
});