JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<div id="page">
    <h1>title</h1>
    <ul id="nav"><!--
     --><li><a href="#">nav</a></li><!--
     --><li><a href="#">nav</a></li><!--
     --><li><a href="#">nav</a></li><!--
     --><li><a href="#">nav</a></li><!--
     --><li><a href="#">nav</a></li><!--
 --></ul>
    <div id="content">
        <div id="article">
            <p>article</p>
            <p>article</p>
            <p>article</p>
            <p>article</p>
            <p>article</p>
        </div>
        <div id="sidebar">
            <p>sidebar</p>
            <p>sidebar</p>
            <p>sidebar</p>
            <p>sidebar</p>
            <p>sidebar</p>
        </div>
    </div>
</div>

CSS

@media screen
{
    body
    {
        line-height: 1.4em;
        font-family: sans-serif;
    }
    #page
    {
        width: 800px;
        margin: auto;
    }
    h1
    {
        font-weight: bold;
        margin: 0.7em 0;
        font-size: 2em;        
    }
    p
    {
        margin-bottom: 1.4em;
    }
    p.btn
    {
        margin-bottom: 0;
    }
    #btn-nav,
    #btn-sidebar
    {
        display: none;
    }
    #content
    {
        position: relative;
        margin-top: 1.4em;
    }
    #nav
    {
        background-color: #FAFAFA;
    }
    #nav a
    {
        color: #000;
        display: block;
        padding: 0.5em 10px;
    }
    #nav li
    {
        display: inline-block;
        margin-left: 10px;
    }
    #nav li:first-child
    {
        margin-left: 0;
    }
    #article,
    #sidebar
    {
        width: 580px;
        float: left;
        margin-right: 20px;
        background-color: #FAFAFA;
        padding: 1.4em 0;
    }
    #sidebar
    {
        width: 200px;
        margin-right: 0;
    }
}
@media (max-width: 820px)
{
    #page
    {
        width: auto;
        margin: 0 10px;
    }
    #btn-nav,
    #btn-sidebar
    {
        display: inline-block;
    }
    #btn-nav
    {
        position: absolute;
        top:   1.4em;
        right: 10px;
    }
    #btn-sidebar
    {
        position: absolute;
        bottom: -2.8em;
        right:  0;
    }
    .js #nav
    {
        max-height: 0;
        overflow: hidden;
    
        -webkit-transition: max-height 0.3s;
           -moz-transition: max-height 0.3s;
            -ms-transition: max-height 0.3s;
             -o-transition: max-height 0.3s;
                transition: max-height 0.3s;
    }
    .js #nav.active
    {
        max-height: 2.8em;
        overflow: hidden;
    }
    .js #sidebar
    {
        position: absolute;
        z-index: 10;
        right: -10px;
        width: 0;
        overflow: hidden;
        top: 0;
        border-left: 10px solid #FFF;
  ...

JavaScript

document.documentElement.className = 'js';

var btnBefore = function(id)
{    
    var    elt = document.getElementById(id),
           txt = document.createTextNode('show / hide ' + id),
             p = document.createElement('p'),
           btn = document.createElement('button'),
        parent = elt.parentNode,
        active = 'active';
    
    btn.id = 'btn-' + id;
    btn.appendChild(txt);
      p.appendChild(btn);
      p.setAttribute('class', 'btn');
    parent.insertBefore(p, elt);
    
    btn.onclick = function()
    {
        if(elt.className == active)
        {
            elt.setAttribute('class', '');
        }
        else
        {
            elt.setAttribute('class', active);
        }
    }
};

btnBefore('nav');
btnBefore('sidebar');