JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<button onclick="toggleHistory()">toggle history</button>
<div id="container">
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="revision">
    </div>
    <div class="current revision">
        This is my note
    </div>
</div>

CSS

#container {
    background-color: #000;
}

.revision {
    background-color: #FFF;
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    height: 0;
    margin: 0 auto;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.revision.current {
    display: block;
    height: auto;
    padding: 20px;
    position: relative;
    width: 90%;
    z-index: 100;
}

.history .revision:nth-last-child(2) {
    height: 30px;
    opacity: 0.95;
}
.revision:nth-last-child(2) {
    width: 85%;
}

.history .revision:nth-last-child(3) {
    height: 20px;
    opacity: 0.9;
}
.revision:nth-last-child(3) {
    width: 80%;
}

.history .revision:nth-last-child(4) {
    height: 15px;
    opacity: 0.85;
}
.revision:nth-last-child(4) {
    width: 75%;
}

.history .revision:nth-last-child(5) {
    height: 12px;
    opacity: 0.80;
}
.revision:nth-last-child(5) {
    width: 70%;
}

#container {
    padding: 10px;
}

.history .revision:hover {
    opacity: 1;
}

JavaScript

function toggleHistory() {
    $('#container').toggleClass('history');
}