JSFiddle - React, Tailwind, and code Playground

by Jonathan Sampson

HTML

<article>
    <nav>
        <h1>Navigation</h1>
        <p>This is the navigation portion.</p>
    </nav>
    <section>
        <h1>Click Anywhere</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus vitae nisl vel posuere. Vivamus gravida tincidunt nisi a posuere. Fusce lectus mauris, finibus vitae blandit a, feugiat a erat. In non finibus mi. Praesent tristique sapien congue dolor consectetur, at porta risus venenatis. Vivamus venenatis enim at risus venenatis, non mollis elit vehicula. Morbi odio magna, tristique eget pharetra vel, placerat efficitur erat. Suspendisse dignissim non urna pulvinar congue. Fusce lobortis, risus in lobortis ornare, erat mauris mattis lectus, eget accumsan lacus arcu quis eros. Aenean eu nunc vel purus hendrerit varius. Morbi tempor congue nibh. Nulla arcu leo, tincidunt molestie mattis eu, pretium nec orci. Aenean urna nunc, faucibus sit amet pharetra nt</p>
    </section>
</article>

CSS

body {
    margin: 0;
    overflow-x: hidden;
    font-family: "Segoe UI";
}

article {
    left: -300px;
    position: relative;
    transition: left 2s;
    box-sizing: border-box;
    width: calc(100% + 300px);
    padding: 0 1em 0 calc(300px + 1em);
}

article.open {
    left: 0px;
}

nav {
    color: #f1f1f1;
    position: fixed;
    padding: 0 1em;
    background: #212121;
    box-sizing: border-box;
    width: 300px; height: 100%;
    margin: -1em auto auto calc(-300px - 1em);
}

JavaScript

document.addEventListener( "click", function () {
    document.querySelector( "article" ).classList.toggle( "open" );
});