JSFiddle - React, Tailwind, and code Playground

by gregir

HTML

<div id="wrapper">
    <div class="container" id="container1">
        <div class="test"><img src="http://davidnaylor.org/temp/firefox-logo-200x200.png"></div>
    </div>
    <div class="container" id="container2">
            <img src="http://davidnaylor.org/temp/firefox-logo-200x200.png">
    </div>
    <div class="container" id="container3"> 
        <div class="test"><img src="http://davidnaylor.org/temp/firefox-logo-200x200.png"></div>            
    </div>
</div>

CSS

#wrapper {width: 80%;}

#container1 {background-color: red;}
#container2 {background-color: blue; max-width: 100px;}
#container3 {background-color: green;}

.container {float: left; width: 33.33%;}

.test {background-color: yellow; width: 100%; max-width: 100px;}

img {max-width: 100%;}