JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>


<header>
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo%21_Logo.svg" alt="">
    
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
    </ul>

    <div>FR|NL</div>

    
</header>

<img class="hdr" src="https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?cs=srgb&dl=beach-blur-boardwalk-132037.jpg&fm=jpg" alt="">


<ul class="photos">
    <li><img src="https://images.pexels.com/photos/1659438/pexels-photo-1659438.jpeg?cs=srgb&dl=beautiful-cliff-clouds-1659438.jpg&fm=jpg" alt=""></li>
    <li><img src="https://images.pexels.com/photos/1544880/pexels-photo-1544880.jpeg?cs=srgb&dl=dawn-evening-gradation-1544880.jpg&fm=jpg" alt=""></li>
    <li><img src="https://images.pexels.com/photos/206660/pexels-photo-206660.jpeg?cs=srgb&dl=aerial-clouds-dawn-206660.jpg&fm=jpg" alt=""></li>
    <li><img src="https://images.pexels.com/photos/1666021/pexels-photo-1666021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt=""></li>
    <li><img src="https://images.pexels.com/photos/1591447/pexels-photo-1591447.jpeg?cs=srgb&dl=photography-of-fall-trees-1591447.jpg&fm=jpg" alt=""></li>
</ul>

SCSS

@import url('https://fonts.googleapis.com/css?family=Noto+Sans|Ubuntu&display=swap');


html,body {

    padding:0;
    margin: 0;
    font-family: 'Ubuntu', sans-serif;
    color: #444;
    

}

header {
    
    position: fixed;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    padding: 10px 5px 5px 5px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
    img {
        flex-basis: 200px;
        height: 20px;
    }
    ul {
        background-color: red;    
        padding: 0;
        margin: 0;
        display: flex;
        list-style-type: none;
        justify-content: space-between;
        li {
            
            cursor:pointer;
            padding: 0px 10px;
            &:hover {
               background-color: #eee;
               color: red;
            }
        }
    }

}

img.hdr {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}


ul.photos {
    padding: 0;
    width: 80%;
    margin: 20px auto;
    display: flex;
    height: 300px;
    list-style-type: none;
    li {
        flex: 0 0 20%;
        img {
            cursor: pointer;
            object-fit: cover;
            object-position: center center;
            display: block;
             width: 100%;   
             height: 100%;
        }
    }
}

JavaScript

const lightbox = GLightbox({
    touchNavigation: true,
    loopAtEnd: true,
    autoplayVideos: true,
    onOpen: () => {
        console.log('Lightbox opened')
    },
    beforeSlideLoad: (slide, data) => {
        // Need to execute a script in the slide?
        // You can do that here...
    },
	elements: Array.from(document.querySelectorAll('.photos img')).map(i =>  ({href: i.src, type: 'image'})),
    
});

document.querySelector('.photos').addEventListener('click', () => lightbox.open());