JSFiddle - React, Tailwind, and code Playground

by von

HTML

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <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>
        <script src='http://lovasoa.github.io/tidy-html5/tidy.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 {
              ...