JSFiddle - React, Tailwind, and code Playground

by cfree

HTML

<body>
    <div id="container">
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
        <div class="card">
            <img src="http://placehold.it/200x200&text=Card"/>
        </div>
    </div>
</body>

CSS

html {
   height: 100%;
} 

body {
    height: 100%;
   width: 100% /* needed for Firefox */
}

#container {
    background: green;
   display: -webkit-box; display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
     padding: 3px;
   margin: 0;

   width: 100%;
        max-width: 500px;
   
    
   -webkit-flex-flow: row wrap;
   -webkit-justify-content: center;
} 

.card {
    margin: 3px 1.5%; 
   -webkit-flex: 1 0 30%;       
}

.card img {
    width: 100%;
    height: auto;
}