JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<nav class="toolbox">
    <div id="options" class="horizontal">
        <div class="option">
            <header class="option-header">
                <span class="ui-icon ui-icon-triangle-1-s"></span>
                <label class="option-name">Content 1</label>
                <button class="option-config">*</button>
            </header>
            <div class="option-content">
                test content1
            </div>
        </div>
        
        <div class="option">
            <header class="option-header">
                <span class="ui-icon ui-icon-triangle-1-s"></span>
                <label class="option-name">Content 2</label>
                <button class="option-config">*</button>
            </header>
            <div class="option-content">
                test content2 longer, longer , longer longer longer text to expand one of them.
            </div>
        </div>
        
        <div class="option">
            <div class="option-content">
                <button class="punch">JUMP TO<sub>NETWORK</sub></button>
            </div>
        </div>
    </div>
    <div id="menu-buttons">
        link1, link2, link3, link4
    </div>
</nav>

CSS

body { background: #efefef; margin: 0; padding: 0;}
sub { display: block; }

#toolbox {
    
}
#options.horizontal {
    
}
#options.horizontal {
    
}
#options.vertical {
    
}
#options .option {
    display: inline-block;
    height: 90px;
    overflow: hidden;
    padding: 3px;
    margin: 0;
    border: 1px solid #aaa;
    border-left: 0;
    vertical-align: top;
    
    background: rgba(242,242,242,1);
}
.option .option-header {
    background: #fff;
    white-space: nowrap;
    display: block;
}
.option .option-config {
    border: 0;
    background: transparent;
    float: right;
}

.option .option-content {
    max-width: 222px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* JUMP BUTTON */
/* punch
*******************************************************************************/
button.punch {
    background: #4162a8;
    border-top: 1px solid #38538c;
    border-right: 1px solid #1f2d4d;
    border-bottom: 1px solid #151e33;
    border-left: 1px solid #1f2d4d;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111;
    color: #fff;
    font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
    line-height: 1;
    padding: 18px 12px;
    margin-bottom: 10px;
    text-align: center;
    text-shadow: 0px -1px 1px #1e2d4d;
    
    -webkit-background-clip: padding-box; }
button.punch:hover {
    -webkit-box-shadow:...