Tailwind CSS Lightbox Gallery Example

In this section we will create responsive lightbox gallery in tailwindcss using spotlight. Spotlight Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.


Example 1

Create single image with lightbox with tailwind and spotlight.

<div class="max-w-xl rounded">
    <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
        data-src-800="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
        data-src-1200="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
        data-src-2400="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
        data-src-3800="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg">
        <img src="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg">
    </a>
</div>


Example 2

Create responsive lightbox gallery using tailwind css grid and spotlight.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Lightbox Gallery</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- spotlight cdn -->
        <link rel="stylesheet" href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css">
        <script src="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js"></script>
    </head>

    <body>
        <div class="container mx-auto lg:grid lg:grid-cols-3 lg:gap-2">
            <div class="w-full rounded">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/03/03/50/beach-7239311__340.jpg">
                </a>
            </div>
            <div class="w-full rounded">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/06/17/56/flowers-7246619__340.jpg">
                </a>
            </div>
            <div class="w-full rounded">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                </a>
            </div>

            <div class="w-full rounded">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/01/04/16/01/lighthouse-6915406__340.jpg">
                </a>
            </div>
            <div class="w-full rounded">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/19/07/12/mount-kilimanjaro-7271184__340.jpg">
                </a>
            </div>
        </div>
    </body>

</html>
tailwind lightbox gallery

tailwind lightbox gallery


lightbox image tailwind css

lightbox image tailwind css

Example 3

Tailwind lightbox gallery with flex.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Lightbox Gallery With Flex</title>
        <script src="https://cdn.tailwindcss.com"></script>
        <!-- spotlight cdn -->
        <link rel="stylesheet" href="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/css/spotlight.min.css">
        <script src="https://rawcdn.githack.com/nextapps-de/spotlight/0.7.8/dist/js/spotlight.min.js"></script>
    </head>

    <body>
        <div class="container flex flex-wrap mx-auto">
            <div class="w-full p-2 rounded lg:w-1/3">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                </a>
            </div>
            <div class="w-full p-2 rounded lg:w-1/3">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                </a>
            </div>
            <div class="w-full p-2 rounded lg:w-1/3">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                </a>
            </div>
            <div class="w-full p-2 rounded lg:w-1/3">
                <a class="spotlight" href="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-1200="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-2400="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg"
                    data-src-3800="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                    <img src="https://cdn.pixabay.com/photo/2022/06/22/18/28/deer-7278490__340.jpg">
                </a>
            </div>
        </div>
    </body>

</html>