JSFiddle - React, Tailwind, and code Playground

by Aamu Padi

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">
                   ...

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() {
    
    
    // when a block is clicked get that specific block
    $('.block').click(function() {
        var block = $(this);
        block.css('background','red');
    });
});