JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/rvera/image-picker/master/image-picker/image-picker.min.js"></script>
<div class="picker">
<select class="image-picker show-html">
<option data-img-src='http://placeimg.com/640/480/any' value='1'>ねこ 1</option>
<option data-img-src='http://placeimg.com/640/480/any' value='2'>ねこ 2</option>
<option data-img-src='http://placeimg.com/640/480/any' value='3'>ねこ 3</option>
</select>
</div>
CSS
ul.thumbnails.image_picker_selector {
overflow: auto;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding: 0px;
margin: 0px; }
ul.thumbnails.image_picker_selector li {
margin: 0px 12px 12px 0px;
float: left; }
ul.thumbnails.image_picker_selector li .thumbnail {
padding: 6px;
border: 1px solid #dddddd; }
ul.thumbnails.image_picker_selector li .thumbnail.selected {
background: #0088cc; }
JavaScript
$("select.image-picker").imagepicker({hide_select: false});
$("select.image-picker.show-labels").imagepicker({hide_select: false, show_label: true});
var container = $("select.image-picker.masonry").next("ul.thumbnails");
container.imagesLoaded(function(){
container.masonry({
itemSelector: "li",
});
});