JSFiddle - React, Tailwind, and code Playground

by ryanburnett

HTML

<div class="header"></div>
<div class="content"></div>            
<div class="content-right"></div>
<div class="clear-fix"></div>
<div class="footer"></div>

CSS

body {
        width: 100%;
        height: 100%;
    }
    .bg-black {
        background-color: #000!important;        
    }
    .header {
        width: 100%;
        height: 100px;
        background-color: red;
    }
    .content{
        float: left;
        width: 75%;
        height: 350px;
        background-color: yellow;
    }
.clear-fix {
    clear: both;
}

    .content-right{
        width: 25%;
        float: right;
        height: 350px;
        background-color: green;
    }

    .footer {
        width: 100%;
        height: 100px;
        background-color: blue;
    }

JavaScript

$(".content").on("click", function() {
    $(this).addClass("bg-black"); 
});