JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test iOS 4 like folder</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="folder">folder 1</div>
                <div class="folder">folder 2</div>
                <div class="app">app 1</div>
                <div class="folder">folder 3</div>
            </div>
            <div class="row">
                <div class="folder">folder 4</div>
                <div class="app">app 2</div>
                <div class="app">app 3</div>
                <div class="folder">folder 5</div>
            </div>
            <div class="row">
                <div class="folder">folder 6</div>
                <div class="folder">folder 7</div>
                <div class="folder">folder 8</div>
                <div class="app">app 4</div>
            </div>
            <div class="row"></div>
            <div class="row"></div>
            <div class="row"></div>
        </div>
        <div class="folderContent"><span class="folderName">Folder Name</span></div>
    </body>
</html>

CSS

body * { font-family: sans-serif, helvetica }
.container { display:inline-block;height:350px; overflow:hidden; border: solid 1px #000}
.row, .folderContent { width:220px; padding:5px; overflow:hidden }
.row { height:55px; }
.folderContent { background-color:#000;height:150px }
.folderName { color: #fff; font-weight: bold; font-size: .78em }
.folder, .app { height:35px; width:35px; padding:5px; float:left; margin:5px; font-size: 0.78em; overflow:hidden; border-radius:5px;-moz-border-radius: 5px; -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.7); 
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.7);box-shadow: 2px 2px 5px rgba(0,0,0,0.7); cursor:default}
.folder { background-color:#0df }
.app { background-color:#df0 }

JavaScript

$(function() {
    $(".folderContent").hide();

    //arrange the background image starting position for all the rows.
    //This will allow the background image cut illusion when showing the folder content panel
    $(".row").each(function() {
        $(this).css({
            backgroundImage: "url('http://farm6.static.flickr.com/5085/5335262784_8b5d87db95_d.jpg')",
            backgroundPosition: "0px -" + $(this).index() * $(this).outerHeight() + "px"
        });
    });

    //when a folder is clicked,
    //position the content folder after the clicked row
    //and toggle all folder / app icon that is not the one clicked.
    //and toggle the folder content panel
    $(".folder").click(function(event) {
        var folderContent = $(".folderContent");
        folderContent.remove();

        var folderContentShown = folderContent.css("display") != "none";

        var clickedFolder = $(this);
        clickedFolder.parent(".row").after(folderContent);

        folderContent.find(".folderName").text($(this).text());

        $("body").find(".folder, .app").not(clickedFolder).each(function() {
            if (!folderContentShown) $(this).animate({
                opacity: 0.00
            }, "fast");
            else $(this).animate({
                opacity: 1.00
            }, "fast");
        });

        //clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "fast");
        folderContent.slideToggle("fast");
        event.preventDefault();
    });
});