JSFiddle - React, Tailwind, and code Playground

HTML

<div class="masonry"> 
    
    <div class="item"><a href="http://arkhana.fr/img/1.png"><img src="http://arkhana.fr/img/1.png" /></a><div class="title">test1</div></div>
    <div class="item"><a href="http://arkhana.fr/img/2.png"><img src="http://arkhana.fr/img/2.png" /></a><div class="title">test2</div></div>
     <div class="item"><a href="http://arkhana.fr/img/3.png"><img src="http://arkhana.fr/img/3.png" /></a><div class="title">test3</div></div>
     <div class="item"><a href="http://arkhana.fr/img/4.png"><img src="http://arkhana.fr/img/4.png" /></a><div class="title">test4</div></div>
     <div class="item"><a href="http://arkhana.fr/img/5.png"><img src="http://arkhana.fr/img/5.png" /></a><div class="title">test5</div></div>
     <div class="item"><a href="http://arkhana.fr/img/6.png"><img src="http://arkhana.fr/img/6.png" /></a><div class="title">test6</div></div>
     <div class="item"><a href="http://arkhana.fr/img/7.png"><img src="http://arkhana.fr/img/7.png" /></a><div class="title">test7</div></div>
     <div class="item"><a href="http://arkhana.fr/img/8.png"><img src="http://arkhana.fr/img/8.png" /></a><div class="title">test8</div></div>
     <div class="item"><a href="http://arkhana.fr/img/9.png"><img src="http://arkhana.fr/img/9.png" /></a><div class="title">test9</div></div>
     <div class="item"><a href="http://arkhana.fr/img/10.png"><img src="http://arkhana.fr/img/10.png" /></a><div class="title">test10</div></div>
    
</div>

CSS

body { margin: 0; background: #e9e9e9; height:100%; padding:1em; }

.masonry { position:absolute; height:auto; top:0px; bottom:0px; margin: 0; padding: 20px; -moz-column-gap: 1em; -webkit-column-gap: 1em; column-gap: 1em; -moz-column-width: 220px; -webkit-column-width: 220px; column-width: 220px; }

.item { width:100%; display: block; position:relative; margin: 0 0 1.5em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.item img { width:100%; }

.title { pointer-events: none; background-image: linear-gradient(transparent, rgba(0,0,0,0.55), rgba(0,0,0,0.8)); position: absolute; bottom: 0; left: 0; right: 0; padding: 4em 1em 1em 1em; color:white; font-family:'open sans'; font-weight:100; font-size:16px; line-height:25px; text-align:right; }