JSFiddle - React, Tailwind, and code Playground

by ryanburnett

HTML

<header></header>
<article></article>
<section>
    <button>Click me</button>
</section>

CSS

header {
    width:400px;
    height:100px;
    background:blue;
}
header.alt {
    background:yellow;
}
article {
    width:100px;
    height:400px;
    background:red;
    float:left;
}
section {
    width:400px;
    height:360px;
    background:green;
    padding-top:40px;
}
button {
    margin:0 auto;
    display:block;
    border:1px solid #fff;
    padding:20px;
}

JavaScript

$("button").click(function() {
   $("header").toggleClass("alt"); 
});
$("button").mouseenter(function() {
    $("header").addClass("alt");
});
$("button").mouseleave(function() {
    $("header").removeClass("alt");
});