JSFiddle - React, Tailwind, and code Playground

by Beben Koben

HTML

<div class='panel-a'>
<a href='#'><img src='http://your-image.png' alt='Home'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu1'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu2'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu3'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu4'/></a>
<a href='#'><img src='http://your-image.png' alt='Menu5'/></a>
<div class='flip-b'><img src='http://your-image-close.png' alt='Close'></div>
</div>
<p class='flip'><img src=''http://your-image.png' alt='Menu'/></p>

CSS

div.panel-a, .flip
{
cursor:pointer;
z-index:1000;
position:fixed;
top:10px;
overflow:auto;
left:0px;
}
p.flip
{
text-align:center;
padding:5px;
position:fixed;
top:0px;
overflow:auto;
margin:0px;
}
div.panel-a
{
padding:5px;
height:auto;
display:none;
cursor:default;
}
div.flip-b
{
text-align:center;
padding:5px;
margin:0 auto;
cursor:pointer;
}

JavaScript

$(document).ready(function() {
        $(".flip").click(function() {
            $(".panel-a").show("slow");
            $(".flip").hide("slow");
        });

        $(".flip-b").click(function() {
            $(".panel-a").hide("slow");
            $(".flip").show("slow");
        });
    });