JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid-main_content">
    <div id="content">
         <h2>Three column block</h2>

        <div class="block">
            <div class="column column-3">
                 <h3>Header 3</h3>

                <p>Pariatur lorem nisi in cillum te non quis iudicem est non amet admodum litteris, aut do noster dolor sint, incididunt quis cupidatat singulis hic quibusdam se malis excepteur, eu a voluptatibus, quis incurreret nam graviterque. Se quae commodo tempor, in et irure elit lorem. Ubi o fugiat aliquip.</p>
            </div>
            <div class="column column-3">
                 <h3>Header 3</h3>

                <p>Pariatur lorem nisi in cillum te non quis iudicem est non amet admodum litteris, aut do noster dolor sint, incididunt quis cupidatat singulis hic quibusdam se malis excepteur, eu a voluptatibus, quis incurreret nam graviterque. Se quae commodo tempor, in et irure elit lorem. Ubi o fugiat aliquip.</p>
            </div>
            <div class="column column-3">
                 <h3>Header 3</h3>

                <p>Pariatur lorem nisi in cillum te non quis iudicem est non amet admodum litteris, aut do noster dolor sint, incididunt quis cupidatat singulis hic quibusdam se malis excepteur, eu a voluptatibus, quis incurreret nam graviterque. Se quae commodo tempor, in et irure elit lorem. Ubi o fugiat aliquip.</p>
            </div> <span class="clear-both"></span>

        </div>
        <div class="block">
            <div class="column column-3">
                <img src="http://www.innovastudio.com/builderdemo/assets/cafe.jpg">
            </div>
            <div class="column column-3">
                <img src="http://www.innovastudio.com/builderdemo/assets/cafe.jpg">
            </div>
            <div class="column column-3">
                <img src="http://www.innovastudio.com/builderdemo/assets/cafe.jpg">
            </div> <span class="clear-both"></span>

        </div>
        <div class="block">
            <div class="column...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
 * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family:'Open Sans', sans-serif;
}
.clear-both {
    display: block;
    clear: both;
}
#block-list {
    /*    background: lightgreen;*/
}
#grid-main_content {
    max-width: 980px;
    min-height: 300px;
    padding: 10px;
    margin: 0 auto;
    /*    background: black;*/
}
.block {
    clear: both;
    /*border: 1px solid black;*/
    /*margin: 2px;*/
}
.column {
    min-height: 80px;
    height: auto;
    padding: 10px;
    /*margin: 5px;*/
    /*    border: 1px solid black;*/
}
.column p {
    /*    text-align: justify;*/
}
.column img {
    max-width: 100%;
    height: auto;
    padding-top: 20px;
}
.column-1 {
    /*    background: lightblue;*/
}
.column-2 {
    /*    background: green;*/
    width: 50%;
    float: left;
}
.column-3 {
    /*    background: yellow;*/
    width: 33.3%;
    float: left;
}
.column-4 {
    /*    background: red;*/
    width: 25%;
    float: left;
}
/* phone */
 @media only screen and (min-width : 100px) and (max-width : 480px) {
    .column-2 {
        float: none;
        width: auto;
    }
    .column-3 {
        float: none;
        width: auto;
    }
    .column-4 {
        float: none;
        width: auto;
    }
}
/* tablet */
 @media only screen and (min-width:481px) and (max-width:768px) {
    .column-4 {
        width: 50%;
    }
}

JavaScript

$(document).ready(function () {

    $('body').click(function (e) {
        var clicked = $(e.target);
        
        //See if the clicked element is (or is inside) a .block:
        var clickedBlock = clicked.closest('.block');
        if (clickedBlock.length) {
            clickedBlock.css('background', 'red');
        }

        //Remove the overridden background from other blocks:
        var allBlocks = $('.block');
        allBlocks.not(clickedBlock).css('background', '');
    });
    
});