JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andreknieriem/simplelightbox@master/dist/simple-lightbox.min.css?v2.7.0">
<script src="https://cdn.jsdelivr.net/gh/andreknieriem/simplelightbox@master/dist/simple-lightbox.min.js?v2.7.0"></script>
<div class="gallery">
        <a href="https://images.unsplash.com/photo-1614628820787-fec22f9124a1" class="big"><img src="https://simplelightbox.com/img/thumb/01.jpg" alt="" title="測試" /></a>
    </div>

CSS

.gallery img {
 width: 200px;
}


        body {
            font-family: 'Raleway', sans-serif;
            font-size: 20px;
            line-height: 34px;
        }

        * {
            box-sizing: border-box;
        }

        .container .gallery a img {
            float: left;
            width: 25%;
            height: auto;
            border: 2px solid #fff;
            -webkit-transition: -webkit-transform .15s ease;
            -moz-transition: -moz-transform .15s ease;
            -o-transition: -o-transform .15s ease;
            -ms-transition: -ms-transform .15s ease;
            transition: transform .15s ease;
            position: relative;
        }

        .clear {
            clear: both;
        }

        a {
            color: #009688;
            text-decoration: none;
        }

        a:hover {
            color: #01695f;
            text-decoration: none;
        }

JavaScript

var $gallery = new SimpleLightbox('.gallery > a', {});