JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" >
   <ul class="leaf">
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
      <li>
         <a href="#" title="Voir le détail de cette image"><img src="http://placehold.it/200x150&amp;text=Image" alt="" class="w100"></a>
         <div><a href="#" title="Voir le détail de cette image" class="media-title">Titre de mon image</a></div>
      </li>
   </ul>
</div>

CSS

.box{
    background-color: #FFF;
    /*position: absolute;
    z-index: -20;/*
    /* Seule solution trouvée mais position absolue non souhaitée dans mon design*/
} 
.w100{
    width: 100%;
}

.leaf li{
	display: inline-block;
    vertical-align: top;
    list-style: none;
    margin 		: 12.5px;
	width 		: 204px;
	text-align 	: center;
}

.box .media-title{
	display 	: block;
	padding 	: 0 5px;
}

.box .media-title{
	margin-top 		: 10px;
}
/* Effets feuilles */

.leaf li > a {
	display:block;
	position: relative;  
	padding: 10px;
}



/* on ajoute des effets graphiques 
   sur nos futures feuilles */  
.leaf li > a,
.leaf li > a:after,
.leaf li > a:before { 
	background: #fff;  
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.2);  
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.2);  
	box-shadow: 0 0 4px rgba(0,0,0,0.2);  
	-webkit-transition: all .7s;
	-moz-transition: all .7s;
	-o-transition: all .7s;
	transition: all .7s;
}

/* on utilise les pseudo éléments pour ajouter des feuilles */  
.leaf li > a:after,
.leaf li > a:before	{ 
	position: absolute;  
	top: 0; right:0; bottom:0; left:0;  
	content: "";  
	z-index: -10;  
	/* définit le centre de transformation */  
	-webkit-transform-origin: 100% 0;
	-moz-transform-origin: 100% 0;
	-o-transform-origin: 100% 0;
	transform-origin: 100% 0;
}  
.leaf li > a:hover:after,
.leaf li > a:focus:after	{ 
	-webkit-transform: rotate(-1deg); 
	-moz-transform: rotate(-1deg); 
	-o-transform: rotate(-1deg); 
	transform: rotate(-1deg); 
	right: 6px; left:-6px;
}  
.leaf li > a:hover:before,
.leaf li > a:focus:before { 
	-webkit-transform: rotate(-2.2deg);  
	-moz-transform: rotate(-2.2deg);  
	-o-transform: rotate(-2.2deg);  
	transform: rotate(-2.2deg);  
	right: 12px; left: -12px;  
}
.leaf li > a:hover,
.leaf li > a:hover:after,
.leaf li > a:hover:before,
.leaf li > a:focus,
.leaf li > a:focus:after,
.leaf li > a:focus:before	{
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);  
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);  
	box-shadow: 0...