JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="polaroids">
    <li> <a href="http://www.placekitten.com/100/100" title="Roeland!">
           <img src="http://www.placekitten.com/100/100" alt="Roeland!"/>
      </a>

    </li>
    <li> <a href="http://www.placekitten.com/100/100" title="Roeland!">
           <img src="http://www.placekitten.com/100/100" alt="Roeland!"/>
      </a>

    </li>
    <li> <a href="http://www.placekitten.com/100/100" title="Roeland!">
           <img src="http://ct4k.co.za/images/home-intro.png" alt="Roeland!"/>
      </a>

    </li>
    <li> <a href="http://www.placekitten.com/100/100" title="Roeland!">
           <img src="http://www.placekitten.com/100/100" alt="Roeland!"/>
      </a>

    </li>
    <li> <a href="http://www.placekitten.com/100/100" title="Roeland!">
           <img src="http://www.placekitten.com/100/100" alt="Roeland!"/>
      </a>

    </li>
</ul>

CSS

ul {
    list-style: none;
}
ul li {
    display: inline;
}
ul a {
    display: inline;
    float: left;
}
ul img {
    display: block;
}
ul.polaroids a:after {
    content: attr(title);
}
/* By default, we tilt all our images -2 degrees */
 ul.polaroids a {
    -webkit-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    transform: rotate(-2deg);
}
/* Rotate all even images 2 degrees */
 ul.polaroids li:nth-child(even) a {
    -webkit-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
/* Don't rotate every third image, but offset its position */
 ul.polaroids li:nth-child(3n) a {
    -webkit-transform: none;
    -o-transform: none;
    -ms-transform: none;
    -moz-transform: none;
    transform: none;
    position: relative;
    top: -5px;
}
/* Rotate every fifth image by 5 degrees and offset it */
 ul.polaroids li:nth-child(5n) a {
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
    position: relative;
    right: 5px;
}
/* Keep default rotate for every eighth, but offset it */
 ul.polaroids li:nth-child(8n) a {
    position: relative;
    top: 8px;
    right: 5px;
}
/* Keep default rotate for every eleventh, but offset it */
 ul.polaroids li:nth-child(11n) a {
    position: relative;
    top: 3px;
    left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
 ul.polaroids a:hover {
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    -moz-transform: scale(1.25);
    transform: scale(1.25);
    position: relative;
    z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
 ul.polaroids a {
    -webkit-transition: 0 .15s...