JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<script src="https://henriquea.github.io/minigrid/js/minigrid.js"></script>
  <div class="container">
 <div class="grid">
   <div class="grid-item">
     <img src="http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg"/></div>
   <div class="grid-item">
     <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg"/></div>
   <div class="grid-item"> <img src="http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"/></div>
   <div class="grid-item"><img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg"/></div>
   <div class="grid-item">
     <img src="http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg"/></div>
   <div class="grid-item">
     <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg"/></div>
   <div class="grid-item"> <img src="http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"/></div>
   <div class="grid-item"><img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg"/></div>
  <div class="grid-item">
     <img src="http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg"/></div>
   <div class="grid-item">
     <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg"/></div>
   <div class="grid-item"> <img src="http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"/></div>
   <div class="grid-item"><img...

CSS

body {
  text-align: center;
}

.grid-item {
   position: absolute;
  top: 0;
  left: 0;
   width: 131px;
   height:auto;
   background-color: #536DFE;
  transition: .3s cubic-bezier(.4,.2,.5,1.4);
}

.grid-item.b {
  background-color: #f3c;
}
.grid-item img {
  width:100%;
}
.button {
  text-align: center;
  width: 140px;
  margin: 60px auto;
  display: inline-block;
  padding: 12px;
  background-color: #212121;
  color: #fff;
  text-decoration: none;
  font-family: 'Helvetica Neue';
  border-radius: 3px;
}
.container {
  
  position: relative;
    width: 100%;
    display: block;
    overflow: hidden;
}

JavaScript

(function($){
  
  function grid() {
    minigrid('.grid', '.grid-item');

  }
  
  function loadMore() {
    $('.grid').append('<div class="grid-item b" ><img src="http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg"/></div>');
    $('.grid').append('<div class="grid-item b"><img src="http://www.wired.com/wp-content/uploads/2014/12/9-credit-1.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://g-ecx.images-amazon.com/images/G/01/electronics/detail-page/Klipsch-Image-S4-II-Black-Lifestyle.jpg"/></div>');
    $('.grid').append('<div class="grid-item b"><img src="http://www.technobuffalo.com/wp-content/uploads/2015/01/neytiri-avatar-5824.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://www.trendfilm.com/uploads/film/2015/02/avatar-trend-film-718.jpg"/></div>');
    $('.grid').append('<div class="grid-item b"><img src="http://www.hdwallpapers.in/walls/jake_sully_avatar_disguise-wide.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://i.ytimg.com/vi/nbH-4owbhX4/maxresdefault.jpg"/></div>');
    $('.grid').append('<div class="grid-item b"><img src="http://cdn.wegotthiscovered.com/wp-content/uploads/DreamWorks-Animation-HOME-1-640x360.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://www.iknowtoday.com/wp-content/uploads/2015/03/27-660x330.jpg"/></div>');
    $('.grid').append('<div class="grid-item b" ><img src="http://img005.lazygirls.info/people/tamanna_bhatia/tamanna_bhatia_tamanna_latest_images_7_jpg_jpeg_image_1024_1226_pixels_scaled_76__qWkMn2nO.sized.jpg"/></div>');
    $('.grid').append('<div class="grid-item b"><img...