JSFiddle - React, Tailwind, and code Playground

by Adam Boduch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<div class="container">
    <div>
        <div>
            <h2>App 1</h2>
        </div>
    </div>
    <div>
        <h2>App 2</h2> 
    </div>
    <div>
        <h2>App 3</h2>
    </div>
    <div>
        <h2>App 4</h2>
    </div>
    <div>
        <h2>App 5</h2>
    </div>

</div>
<div class="detail hidden">
    <h1>Details</h1>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    transition: all 1s;
}

.container > div {
    width: 150px;
    height: 150px;
    background: red;
    margin: 1em 0.5em;
}

.hidden {
    display: none;
    transition: all 400ms;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');

$('.container > div').click(function(e) {
    $('.container').toggleClass('hidden');
    $('.detail').toggleClass('hidden');
});