JSFiddle - React, Tailwind, and code Playground

by codemeasandwich

HTML

<div class="concertina open">
<a class="main" href="#url">Settings</a>
	<div class="p1"><img src="unfold/antivirus.png" alt="" /><p><span>Profile</span>Some desciptive text and a <a href="#url">link</a> can go here.</p></div>
	<div class="p2"><img src="unfold/penguin.png" alt="" /><p><span>Found a bug</span>Some desciptive text and a <a href="#url">link</a> can go here.</p></div>
	<div class="p3"><img src="unfold/my_mac.png" alt="" /><p><span>help</span>Some desciptive text and a <a href="#url">link</a> can go here.</p></div>
	<div class="p4"><img src="unfold/my_mac.png" alt="" /><p><span>sdfgdfgdfg</span>Some desciptive text and a <a href="#url">link</a> can go here.</p></div>
</div>

CSS

.concertina {
    width: 100%;
    height: 35px;
    margin: 25px auto 400px auto;
    position: relative;
    z-index: 100;
}
/* default settings */

.concertina div {
    position: absolute;
    padding: 10px;
    left: 0px;
    width: 99%;
    height: 60px;
    -webkit-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
    -webkit-transform: perspective(350px) rotateX(-90deg);
    -o-transform: perspective(350px) rotateX(-90deg);
    transform: perspective(350px) rotateX(-90deg);
}
.concertina div.p1 {
    background: #eee;
    top: 35px;
    -webkit-transition: 0.175s linear 0.35s;
    -o-transition: 0.175s linear 0.35s;
    transition: 0.175s linear 0.35s;
}
.concertina div.p2 {
    background: #ddd;
    top: 115px;
    -webkit-transition: 0.15s linear 0.2s;
    -o-transition: 0.15s linear 0.2s;
    transition: 0.15s linear 0.2s;
}
.concertina div.p3 {
    background: #eee;
    top: 195px;
    -webkit-transition: 0.1s linear 0.1s;
    -o-transition: 0.1s linear 0.1s;
    transition: 0.1s linear 0.1s;
}
.concertina div.p4 {
    background: #ddd;
    top: 275px;
    -webkit-transition: 0.1s linear 0.0s;
    -o-transition: 0.1s linear 0.0s;
    transition: 0.1s linear 0.0s;
}

.concertina:hover div {
    -webkit-transform: perspective(350px) rotateX(0deg);
    -o-transform: perspective(350px) rotateX(0deg);
    transform: perspective(350px) rotateX(0deg);
}
.concertina:hover .p1 {
    -webkit-transition: 0.2s linear 0s;
    -o-transition: 0.2s linear 0s;
    transition: 0.2s linear 0s;
}
.concertina:hover .p2 {
    -webkit-transition: 0.2s linear 0.2s;
    -o-transition: 0.2s linear 0.2s;
    transition: 0.2s linear 0.2s;
}
.concertina:hover .p3 {
    -webkit-transition: 0.2s linear 0.4s;
    -o-transition: 0.2s linear 0.4s;
    transition: 0.2s linear 0.4s;
}
.concertina:hover .p4 {
    -webkit-animation: flipUp 0.2s ease-in-out 0.6s forwards;
    -o-animation: flipUp 0.2s ease-in-out 0.6s forwards;
    animation: flipUp...