JSFiddle - React, Tailwind, and code Playground

by von

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/vue-gallery.min.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/vue-gallery.min.js"></script>
<link href="https://unpkg.com/[email protected]/css/blueimp-gallery.min.css" rel="stylesheet">
<style>
.image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }

</style>

<div id="app">
<h1>
lorem ipsom
</h1>
<hr>
  <gallery :images="images" :index="index" @close="index = null"></gallery>
  <div
    class="image"
    v-for="image, imageIndex in images"
    @click="index = imageIndex"
    :style="{ backgroundImage: 'url(' + image + ')', width: '100px', height: '100px' }"
  ></div>
 
     <label for="fname">Image amount:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <script>
    new Vue({
      el: '#app',
      data: function () {
        return {
          images: [
            'https://dummyimage.com/800/ffffff/000000',
            'https://dummyimage.com/800/ffffff/000000',
            'https://dummyimage.com/800/ffffff/000000',
            'https://dummyimage.com/800/ffffff/000000',
             'https://dummyimage.com/800/ffffff/000000',
             
          ],
          index: null
        };
      },
    
      components: {
        'gallery':...