JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="gallery">
  <li><a title="Dummy" href="http://www.dummy.com" target="_blank">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRAbcF7stPcRmmZxkwuyoPewIEvnYQZvvTJ_f79-ZJ0TFsCn5NJUQ" />
   </a></li>
</ul>

CSS

#gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  -webkit-padding-start: 0px;
}

#gallery li {
  margin: 20px;
  padding:10px 10px 25px 10px;
  /*background: #f7f6f5 url(img/pattern-tile.png);*/
  background: #F1EADD;
  
  /*box shadows - 2 of them!! */
  -moz-box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3);
  -webkit-box-shadow: inset 0 0 8px 2px rgba(138,138,138, 0.1), 0 0 5px 5px rgba(0,0,0, 0.3);
  box-shadow: inset 0 0 2px 8px rgba(138,138,138, 0.1),0 0 5px 5px rgba(0,0,0, 0.3);

  /* setting the movement */
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all  0.3s ease-in-out;
  transition: all 0.3s ease-in-out; 
}

#gallery li img {
  width:200px;
  border: 1px solid #b0a995;
  border: 1px solid rgba(96,96,96,0.2);
}

#gallery li:nth-child(1),
#gallery li:nth-child(4),
#gallery li:nth-child(5),
#gallery li:nth-child(8) {
  /* setting the end state */
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  transform: rotate(-2deg);
}

#gallery li:nth-child(2),
#gallery li:nth-child(6) {
  /* setting the end state */
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  transform: rotate(3deg);
}

#gallery li:nth-child(3),
#gallery li:nth-child(7) {
  /* setting the end state */
  -webkit-transform: rotate(-1deg);
  -moz-transform: rotate(-1deg);
  -o-transform: rotate(-1deg);
  transform: rotate(-1deg);
}

#gallery li:hover {
  /* setting the end state */
  -webkit-transform: scale(1.05) rotate(5deg);
  -moz-transform:scale(1.05) rotate(5deg);
  -o-transform:scale(1.05) rotate(5deg);
  transform:scale(1.05) rotate(5deg);
}
 
#gallery li a:after {
  content: attr(title);
  display: block;
  padding-top: 15px;
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
}