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 {
                border: 1px solid #ebebeb;
                margin: 5px;
                cursor: pointer;
            }

            .description {
                display: block;
            }

            figcaption {
                margin: 5px 0 0 0;
                font-weight: bold;
                color: #000000;
            }

            figure {
                padding: 5px;
                display: inline-block;
            }   

            .blueimp-gallery > .description {
                position: absolute;
                top: 30px;
                left: 15px;
                color: #fff;
                display: none;
            }

            .blueimp-gallery-controls > .description {
                display: block;
            }

            #data-content {
                white-space: pre; 
                font-family: monospace;
            }
        </style>