JSFiddle - React, Tailwind, and code Playground

by IvanChashkin

HTML

<div class="notepad">
    <div id="Country" class="notepad__page">
        <div class="notepad__page__caption"><a href="#Country">Country</a></div>
        <div class="notepad__page__body">
            <h1>Country</h1>
        </div>
    </div>
    <div id="Time" class="notepad__page">
        <div class="notepad__page__caption"><a href="#Time">Time</a></div>
        <div class="notepad__page__body">
            <h1>Time</h1>
        </div>
    </div>
    <div id="Date" class="notepad__page">
        <div class="notepad__page__caption"><a href="#Date">Date</a></div>
        <div class="notepad__page__body">
            <h1>Date</h1>
        </div>
    </div>
    <div id="Numbers" class="notepad__page">
        <div class="notepad__page__caption"><a href="#Numbers">Numbers</a></div>
        <div class="notepad__page__body">
            <h1>Numbers</h1>
        </div>
    </div>
    <div id="General" class="notepad__page">
        <div class="notepad__page__caption"><a href="#General">General</a></div>
        <div class="notepad__page__body">
            <h1>General</h1>
        </div>
    </div>
</div>

CSS

html, body{
    margin:0px;
    padding: 0px;
    height:100%;
}
.notepad{
    position: absolute;
    left:0px;
    right:200px;
    top:0px;
    bottom:20px;
}
.notepad__page{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    border:1px solid silver;
    background: white;
}
.notepad__page{ z-index:100; }
.notepad__page+.notepad__page{ z-index:99; right:-5px; bottom:-5px; }
.notepad__page+.notepad__page+.notepad__page{ z-index:98; right:-10px; bottom:-10px; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page{ z-index:97; right:-15px; bottom:-15px; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page{ z-index:96; right:-20px; bottom:-20px; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page{ z-index:95; right:-25px; bottom:-25px; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page{ z-index:94; right:-30px; bottom:-30px; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page{ z-index:93; right:-35px; bottom:-35px; }
.notepad__page

.notepad__page__caption{
    position: absolute;
    right:-161px;
    width:150px;
    border:1px solid silver;
    border-left:1px solid white;
    background: white;
    margin-top:10px;
    padding:5px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.notepad__page .notepad__page__caption{ top:1em; }
.notepad__page+.notepad__page .notepad__page__caption{ top:3.5em; }
.notepad__page+.notepad__page+.notepad__page .notepad__page__caption{ top:6em; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page .notepad__page__caption{ top:8.5em; }
.notepad__page+.notepad__page+.notepad__page+.notepad__page+.notepad__page .notepad__page__caption{ top:11em; }

.notepad__page:target{
    z-index:101 !important;
    right:0px !important;
    bottom:0px !important;
}