JSFiddle - React, Tailwind, and code Playground

by cincodenada

HTML

<div id="top" style="background: #444C4F">
    <div style="width: 500px; background: #A5A39F;">
    </div>
</div>
<div id="bottom" style="background: #F4F4F4">
    <div style="width: 498px; background: #FFFFFF; border: 1px solid #DDDDDD;">
    </div>
</div>
<button id="toggledark">Toggle Dark Background</button>
<button id="toggleborder">Toggle Dark Border</button>
<button id="togglefix">Toggle Width</button>

CSS

div div {
    height: 40px;
    margin: auto;
}
#top { padding-top: 40px; }
#top div {
    border-radius: 5px 5px 0 0;
}
#bottom { padding-bottom: 40px; }
#bottom div {
    top: 0px;
    border-radius: 0 0 5px 5px;
}

JavaScript

$('#toggledark').toggle(function() {
    $('#top').css('background','#F4F4F4');
},
function() {
    $('#top').css('background','#444C4F');
});
$('#toggleborder').toggle(function() {
    $('#bottom div').css('border-color','#444C4F');
},
function() {
    $('#bottom div').css('border-color','#DDDDDD');
});
$('#togglefix').toggle(function() {
    $('#bottom div').css('width','500px');
},
function() {
    $('#bottom div').css('width','498px');
});