JSFiddle - React, Tailwind, and code Playground
by sushilbharwani
HTML
<html>
<head>
<style>
</style>
</head>
<body>
<div id="mediacontainer" >
<div class='media' >
<img src='https://lh4.googleusercontent.com/-c77Kr9XpqnA/T8KYveW4EMI/AAAAAAAAAes/_Fy6d6AWGYE/s94/2.jpg' />
<div>Image #1</div>
</div>
<div class='media' >
<img src='https://lh3.googleusercontent.com/-bpTNmc2SG1s/T8KYvc2XcVI/AAAAAAAAAew/ihFSWwK0iDU/s92/3.jpg' />
<div>Image #2</div>
</div>
<div class='media' >
<img src='https://lh6.googleusercontent.com/-jrH84n5r0gY/T8KYwV0CGWI/AAAAAAAAAe0/A089a2j4J5c/s320/4.jpg' />
<div>Image #3</div>
</div>
<div class='media' >
<img src='https://lh3.googleusercontent.com/-dhie2hdF7is/T8KYwXBTZRI/AAAAAAAAAe8/EBOk3wMjQgg/s470/5.jpg' />
<div>Image #4</div>
</div>
<div class='media' >
<img src='https://lh5.googleusercontent.com/-iVxKa3EpKDk/T8KYy-9f3CI/AAAAAAAAAfU/wYNC5uWklK4/s320/6.jpg' />
<div>Image #5</div>
</div>
<div class='media' >
<img src='https://lh5.googleusercontent.com/-A1H8gd8m-IY/T8KYxLxK3hI/AAAAAAAAAfE/wCnYSqNJgmw/s320/7.jpg' />
<div>Image #6</div>
</div>
<div class='media' >
<img src='https://lh4.googleusercontent.com/-j1Tu0bskkkw/T8KYxh3TJ5I/AAAAAAAAAfI/Qr0oyL_1Koc/s92/8.jpg' />
<div>Image #7</div>
</div>
<div class='media' >
<img src='https://lh4.googleusercontent.com/-r8RJ4dREE5I/T8KYx_UmXPI/AAAAAAAAAfY/1doPzd4lHYk/s92/9.jpg' />
<div>Image #8</div>
</div>
<div class='media' >
<img src='https://lh3.googleusercontent.com/-p3KjpLk_BTE/T8KYvQhXswI/AAAAAAAAAeo/b5kSw6_4z5Q/s92/1.jpg' />
<div>Image #9</div>
</div>
</div>
</body>
</html>
CSS
.media{
display:inline-block;
width:250px;
height:250px;
margin:15px;
}
img{
max-width:200px;
max-height:200px;
margin:0px auto;
}