JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<header></header>

<aside>
    <h3>External</h3>
    <ul>
        <li>
            <a href="#">Connections <span>18</span></a>
            <ul>
                <li><a href="#">Item Name <span>245</span></a></li>
                <li><a href="#">Item Name <span>245</span></a></li>
                <li><a href="#">Item Name <span>245</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#">Files <span>2</span></a>
        </li>
    </ul>
    <h3>Local</h3>
    <ul>
        <li>
            <a href="#">Projects<span>18</span></a>
            <ul>
                <li><a href="#">Item Name <span>245</span></a></li>
                <li><a href="#">Item Name <span>245</span></a></li>
                <li><a href="#">Item Name <span>245</span></a></li>
            </ul>
        </li>
        <li>
            <a href="#">Notes <span>34</span></a>
        </li>
    </ul>
</aside>

<article>
    <iframe src="http://pseudoexchange.com/render/ide/css"></iframe>
</article>
<footer>
    <ul>
        <li>
            <input type="submit" class="btn" value="Save Changes">
        </li>
        <li></li>
    </ul>
</footer>

CSS

html, body{
    margin:0;
    padding:0;
    height:100%;
    font-family:Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
    font-size:13px;
    }

header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:23px;
    
    background-color: #e4e4e4;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e4e4e4), to(#b4b4b4));
    background-image: -webkit-linear-gradient(top, #e4e4e4, #b4b4b4);
    background-image:    -moz-linear-gradient(top, #e4e4e4, #b4b4b4);
    background-image:      -o-linear-gradient(top, #e4e4e4, #b4b4b4);
    background-image:         linear-gradient(to bottom, #e4e4e4, #b4b4b4);
    
    -webkit-box-shadow:0 -1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.4), 0 1px 15px rgba(0,0,0,0.5);
    -moz-box-shadow:0 -1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.4), 0 1px 15px rgba(0,0,0,0.5);
    box-shadow:0 -1px 0 rgba(255,255,255,0.5) inset, 0 1px 0 rgba(0,0,0,0.4), 0 1px 15px rgba(0,0,0,0.5);
    z-index:2;
    }





aside{
    position:absolute;
    top:23px;
    left:0;
    bottom:50px;
    width:220px;
    background:#505965;
    overflow-y:auto;
}
aside h3{
    padding: 10px;
    padding-bottom: 5px;
    color: #979FA8;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
aside > ul{
    margin:0;
    padding:0;
    list-style-type:none;
    margin-bottom:10px;
    }
aside > ul > li{
    
    background-color: #717a86;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#717a86), to(#505965));
    background-image: -webkit-linear-gradient(top, #717a86, #505965);
    background-image:    -moz-linear-gradient(top, #717a86, #505965);
    background-image:      -o-linear-gradient(top, #717a86, #505965);
    background-image:         linear-gradient(to bottom, #717a86, #505965);
    border-top:1px solid #878e98;
    border-bottom:1px solid #33373d;
}
aside a{
    display: block;
    color: white;
    text-decoration: none;
   ...

JavaScript

$('aside ul > li > a').on('click', function(e){
    e.preventDefault();
    var _p = $(this).parent();
    
    if(_p.hasClass('active')){
        $('aside li.active').removeClass('active');
    } else {
        $('aside li.active').removeClass('active');
        _p.addClass('active');    
    }
    
});