JSFiddle - React, Tailwind, and code Playground

by julianjelfs

HTML

<body>
    
    <div class="sidebar">
        <ul>
            <li>Menu One</li>
            <li>Menu Two</li>
            <li>Menu Three</li>
            <li>Menu Four</li>
            <li>Menu Five</li>
        </ul>
    </div>
    
    <div class="page">
        <div class="header">
            <h2>Header</h2>
            <button id="menu">Open</button>
        </div>
        <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit ornare rutrum. Donec lobortis adipiscing libero a tincidunt. Integer sollicitudin eros a lacus mattis, ut hendrerit lacus tristique. Aenean placerat in ante tristique pharetra. Vestibulum posuere nulla nec mauris dignissim convallis. Aliquam tempor luctus dui, ut interdum quam pharetra eu. Morbi cursus mauris mauris, a pellentesque justo facilisis ac.</p>

        <p>Donec malesuada sem feugiat erat sagittis, sit amet viverra orci fringilla. Duis euismod purus sit amet condimentum bibendum. Vivamus ullamcorper vel diam at consequat. Phasellus sodales diam et bibendum faucibus. Suspendisse vehicula scelerisque ornare. Nunc non mattis massa, at dictum enim. Nunc eu nibh eu lacus adipiscing pretium. Etiam convallis felis nisi, eget volutpat purus cursus in. Vivamus odio nunc, consequat eu dui sit amet, dignissim porttitor elit.</p>

        <p>Aliquam lacus sem, tristique vitae metus vitae, sodales condimentum libero. In non nibh ut enim semper semper. Donec vitae elit quis eros condimentum sagittis. Nam pulvinar ornare leo, vel consequat neque porttitor a. Donec ullamcorper mi vel sem semper, molestie condimentum neque porttitor. Donec interdum velit nec diam convallis tempor. Vivamus cursus vehicula faucibus. Fusce vitae mauris sed lorem pulvinar bibendum id a turpis. Morbi fermentum purus non fringilla porta. Suspendisse bibendum dui nibh, commodo imperdiet diam convallis in. Integer ut velit aliquam, tristique turpis quis, faucibus dolor. Nunc a eros quis lacus accumsan pharetra sit amet id ante.</p>

 ...

CSS

body, html {
    width:100%;
    height:100%;
    font-family:helvetica;
    padding:0;margin:0;
}

body {
    position:relative;
}

.sidebar {
    background-color:#cccccc;
    float:left;
    height:100%;
    width:200px;
    position:absolute;
    left:-200px;
}

.sidebar.open {
    left:0;
}

.page {
    background-color:#eeeeee;  
    position:absolute;
    padding:10px;
}

.sidebar.open + .page {
    left:200px;
}

.header {
    background-color:#ffffcc;
}

JavaScript

$(function(){
    $("#menu").click(function(){
        $(".sidebar").toggleClass("open");
    });
});