JSFiddle - React, Tailwind, and code Playground

by Andreas Burg

HTML

<div class="ce_gallery first last  block">
  <ul class="cols_3">
    <li class="row_0 row_first even col_0 col_first">
      <figure class="image_container">
        <a href="https://loremflickr.com/300/300/rooster" data-lightbox="">
          <img src="https://loremflickr.com/100/100/rooster" alt="" width="100" height="100"></a>
      </figure>
    </li>
    <li class="row_0 row_first even col_1">
      <figure class="image_container">
        <a href="https://loremflickr.com/300/300/cat" data-lightbox="">
          <img src="https://loremflickr.com/100/100/cat" alt="" width="100" height="100"></a>
      </figure>
    </li>
    <li class="row_0 row_first even col_2 col_last">
      <figure class="image_container">
        <a href="https://loremflickr.com/300/300/dog" data-lightbox="">
          <img src="https://loremflickr.com/100/100/dog" alt="" width="100" height="100"></a>
      </figure>
    </li>
    <li class="row_1 row_last odd col_0 col_first">
      <figure class="image_container">
        <a href="https://loremflickr.com/300/300/donkey" data-lightbox="">
          <img src="https://loremflickr.com/100/100/donkey" alt="" width="100" height="100"></a>
      </figure>
    </li>
  </ul>
</div>
<script>
  (function($) {
    $(document).ready(function() {
      $('a[data-lightbox]').map(function() {
        $(this).colorbox({
          // Put custom options here
          loop: false,
          rel: $(this).attr('data-lightbox'),
          maxWidth: '95%',
          maxHeight: '95%'
        });
      });
    });
  })(jQuery);
</script>

CSS

li {
  min-height: 30px;
  min-width: 20px;
  background: red;
}