JSFiddle - React, Tailwind, and code Playground

by absentik

HTML

<script src="http://jornvanstein.com/js/jquery.jMosaic.js"></script>
<link rel="stylesheet" href="http://jornvanstein.com/css/jquery.jMosaic.css">
<div id="gallery">
<a href="http://jornvanstein.com/images/artunapoli/1.jpg"><img src="http://jornvanstein.com/images/artunapoli/1.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/2.jpg"><img src="http://jornvanstein.com/images/artunapoli/2.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/3.jpg"><img src="http://jornvanstein.com/images/artunapoli/3.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/4.jpg"><img src="http://jornvanstein.com/images/artunapoli/4.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/5.jpg"><img src="http://jornvanstein.com/images/artunapoli/5.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/6.jpg"><img src="http://jornvanstein.com/images/artunapoli/6.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/7.jpg"><img src="http://jornvanstein.com/images/artunapoli/7.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/8.jpg"><img src="http://jornvanstein.com/images/artunapoli/8.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/9.jpg"><img src="http://jornvanstein.com/images/artunapoli/9.jpg" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/10.jpg"><img src="http://jornvanstein.com/images/artunapoli/10.png" alt="#" /></a>
<a href="http://jornvanstein.com/images/artunapoli/11.jpg"><img src="http://jornvanstein.com/images/artunapoli/11.png" alt="#" /></a>
</div>

CSS

#gallery {
    width: 700px;
}

#gallery img {
    height: 100%;
    width: 100%;
}

JavaScript

$(document).ready(function() {
    
    $('#gallery').jMosaic({
        items_type: "a", 
        min_row_height: 180, 
        margin: 7, 
        is_first_big: true
    });
    
});