JSFiddle - React, Tailwind, and code Playground
HTML
<div id="gallery-thumbnails">
<div class="gallery-thumbnail">
<img src="http://i.imgur.com/ldn4NLl.png"/>
</div>
<div class="gallery-thumbnail">
<img src="http://i.imgur.com/ldn4NLl.png"/>
</div>
<div class="gallery-thumbnail">
<img src="http://i.imgur.com/ldn4NLl.png"/>
</div>
<div class="gallery-thumbnail">
<img src="http://i.imgur.com/ldn4NLl.png"/>
</div>
<span class="stretch"></span>
</div>
CSS
#gallery-thumbnails {
float: left;
text-align: justify;
width: 100%;
margin-top: 10px;
}
#gallery-thumbnails > .stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
#galley-thumbnails-container {
display: inline-block;
width: 100%;
}
.gallery-thumbnail {
width: 90px;
height: 90px;
border: 2px solid rgba(0, 0, 0, 0.3);
text-align: center;
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.gallery-thumbnail:hover, .gallery-thumbnail.active {
border-color: rgba(112, 188, 31, 0.43);
}
.gallery-thumbnail > img {
max-height: 100%;
max-width: 100%;
}
JavaScript
var $thumbnailsContainer = $('#gallery-thumbnails');
$thumbnailsContainer.children('*').each(function() {
$(this).remove();
});
for(var i = 0; i < 5; ++i) {
var $thumbnail = $('<div>', { class: "gallery-thumbnail" });
var $thumbnailImage = $('<img />', { src: 'http://i.imgur.com/ldn4NLl.png' });
$thumbnail.append($thumbnailImage);
$thumbnailsContainer
.append($thumbnail)
.append(' ');
}
$thumbnailsContainer.append($('<span>', { class: 'stretch'} ));