JSFiddle - React, Tailwind, and code Playground

CSS - Sidepanel

by Ben Clayton

HTML

<nav><a href="#panel">&#9776;</a></nav>

  <h1>A bunch of text</h1>
  <p><strong>Click the little menu symbol (&#9776;) in the top bar to summon the panel.</strong></p>
<p>Nice for navigation items or menus etc. Click the 'X' to close.</p>


<div id="panel">
    <a class='close' href="#">X</a><br/>
    <div style="clear:both"></div>
    <p>You can put whatever content you like in here</p>
    <button>Button</button><br/>
    <button>Button</button><br/>
</div>

CSS

body { font-family: sans-serif; }
nav {
    width: 100%;
    background: black;
    text-align: right;
    margin-top:30px; /* just to avoid jsfiddle 'Result' text */
}
nav a {
    color: white;
    text-decoration: none;
    display: inline-block;
    margin: 2px;
}

#panel {
    position: absolute;
    right: 0;
    width: 180px;
    top: 0;
    bottom: 0;
    box-shadow: 0px 0px 15px black;
    background: white;
    padding: 10px;
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: scaleX(0.00001);
    -webkit-transition: -webkit-transform 0.2s ease-in-out;
    outline: 0;
}
#panel:target {
    -webkit-transform: scaleX(1);
}

#panel .close {
    float:right;text-decoration: none;margin-top:30px;}