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;/*
} 
.w100{
    widows: 100%;
}
}
a {  
        display:inline-block;  
        position: relative;  
        padding: 10px;  
        margin: 0 2em;  
        width: 200px;  
        height: 200px;  
    }  
    /* on ajoute des effets graphiques 
       sur nos futures feuilles */  
    a,  
    a:after,  
    a:before {  
        background: #fff;  
        /* ombres légèrement diminuées en opacité */  
        box-shadow: 0 0 4px rgba(0,0,0,0.2);  
        /* on prévoit une transition générale */  
        transition: all .7s;  
    }  
       
    /* on utilise les pseudo éléments pour ajouter des feuilles */  
    a:after,  
    a:before {  
        position: absolute;  
        top: 0; right:0; bottom:0; left:0;  
        content: "";  
        z-index: -10;  
        /* définit le centre de transformation */  
        transform-origin: 100% 0;  
    }  

    a:hover:after,  
    a:focus:after   {  
        transform: rotate(-1deg);  
        right: 6px; left:-6px;  
    }  
    a:hover:before,  
    a:focus:before {  
        transform: rotate(-2.2deg);  
        right: 12px; left: -12px;  
    }  
       
    /* on ré-hausse l'opacité des ombres */  
    a:hover,  
    a:hover:after,  
    a:hover:before,  
    a:focus,  
    a:focus:after,  
    a:focus:before  {  
        box-shadow: 0 0 4px rgba(0,0,0,0.4);  
    }