JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="row">
        <div id="red">
            <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        
        <div id="green">
            <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        
        <div id="blue">
            <img src="http://boringem.org/wp-content/uploads/2013/01/rock.jpg"/>
        </div>
        
    </div>
</div>

CSS

html,body  {
background: #FFFFFF;
font-family: "Helvetica", "Arial", "Tahoma"; /* need font default set */
height: 100%;
width: 100%;
} 

img {
    width:100%; 
        height: 100%;
    
}


.wrapper {
margin: 0 auto;
height: 100%;
width: 80%;
}

.row {

width: 100%;
height: 30%;
}

#red {
    background-color:red;
    height:30%;
width: 33.33%;
    float:left;
        margin: 0 auto;
}

#green {
    background-color:green;
    height:30%;
width: 33.33%;
        float:left;
        margin: 0 auto;
}

#blue {
    background-color:blue;
    height:30%;
width: 33.33%;
        float:left;
        margin: 0 auto;
}