JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<section>
    <article>
         <h1 tabindex="0"> <a href="#">T1</a></h1>

        <section>C1</section>
         <h1 id="c2" tabindex="0"> <a href="#c2">T2</a></h1>	
        <section>C2
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </section>
    </article>
</section>

CSS

html, body, body > section {
    height:100%;
    margin:0 auto;
}
article {
    height:100%;
}
h1 {
    height:20%;
    margin:0;
    text-align:center;
}
h1 a {
    padding:1em;
    display:inline-block;
}
article section:first-of-type {
    height:60%;
}
section ~ section {
    height:0;
}
article > h1, article > section {
    position:relative;
    top:0;
    transition:1s;
    overflow:auto;
}
:target, section + :focus, :target + section, section + :focus + section {
    top:-60%;
}
section + :target + section, section +:focus + section {
    height:60%;
    margin-bottom:-100%;
}
section + :focus:not(:target) a:after {
    content:' click me to freeze this! ';
}
/* makeup */
 html, body, body > section {
}
article {
    background:#def;
    box-shadow:0 0 0 1px;
}
h1 {
    box-shadow:0 0 0 1px;
    background:#abc;
}
section ~ section {
}
section {
    width:800px;
}