JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<section>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/1.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/2.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/3.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/4.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/5.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/6.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/7.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/8.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/9.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/10.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/11.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/12.jpg'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/jpg/13.jpg'>
  </div>
  <div class='block'>
      <iframe class="vine-embed" src="https://vine.co/v/hmzETQ3mnPb/embed/simple" width="320" height="320" frameborder="0"></iframe></div>  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/png/5.png'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/png/6.png'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/png/7.png'>
  </div>
  <div class='block'>
    <img src='http://www.markmurray.co/images/mockup/png/8.png'>
  </div>
</section>

CSS

section {
  -moz-column-width: 15em;
  -webkit-column-width: 15em;
  column-width: 15em;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}
section .block:hover .links {
  visibility: visible;
}
section img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-bottom: -3px;
}
section .caption {
  background: #273646;
  text-align: center;
  color: white;
  padding: 20px 0 0 0;
  margin-bottom: 1em;
  text-transform: lowercase;
  position: relative;
}
section .caption:before {
  content: '';
  width: 15px;
  height: 15px;
  background: #273646;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  left: 2em;
  top: -7.5px;
}
section .caption .links {
  margin-top: 1em;
  visibility: hidden;
}
section .caption .links i {
  display: inline;
  width: 33.3333%;
  float: left;
  padding: 10px 0;
  background: red;
  margin: 0;
  border: 0;
  cursor: pointer;
}
section .caption .links i:hover {
  background: white !important;
  color: #2c3e50;
}
section .caption .links i:nth-child(1) {
  background: #3b5998;
}
section .caption .links i:nth-child(2) {
  background: #00a0d1;
}
section .caption .links i:nth-child(3) {
  background: #c8232c;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}