JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mosaic" class="uk-grid-small uk-child-width-1-4@m uk-child-width-1-3@s uk-child-width-1-2" uk-grid>
    <li>
        <a href="#">
		<img src="https://picsum.photos/300/300" alt="" />
	</a>
    </li>
    <li>
        <a href="#">
		<img src="https://loremflickr.com/300/300/dog" alt="" />
	</a>
    </li>
    <li>
        <a href="#">
		<img src="https://loremflickr.com/300/300/paris" alt="" />
	</a>
    </li>
</ul>

<div id="multiscroll">
    <span class="icon"></span>
    <div class="ms-left">
        <div class="ms-section">
            <img src="https://picsum.photos/300/300" alt="" />
        </div>

        <div class="ms-section">
            <h1>DOG</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/paris" alt="" />
        </div>
    </div>

    <div class="ms-right">
        <div class="ms-section">
            <h1>BEACH</h1>
        </div>

        <div class="ms-section">
            <img src="https://loremflickr.com/300/300/dog" alt="" />
        </div>

        <div class="ms-section">
            <h1>PARIS</h1>
        </div>
    </div>
</div>



















<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiscroll.js/0.2.1/jquery.multiscroll.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.8/js/uikit.min.js"></script>

CSS

.icon {
    z-index: 9999;
    height: 15vh;
    width: 15vh;
    background-color: red;
    position: absolute;
    top: 1em;
    right: 1em;
    display: none;
}

JavaScript

$(document).ready(function() {
    var ms = $('#multiscroll');
    $('#multiscroll, #multiscroll-nav').hide();
    ms.multiscroll({
        scrollingSpeed: 1500,
        easing: 'easeInOutExpo',
        navigation: true,
    });

    $('img').on('click', function() {
        $('#mosaic').fadeOut();
        $('#multiscroll-nav, #multiscroll, .icon').fadeIn();
    });
    $('.icon').on('click', function() {
        $('#mosaic').fadeIn();
        $('#multiscroll-nav, #multiscroll, .icon').fadeOut();
    });
});