JSFiddle - React, Tailwind, and code Playground

by jim31415

HTML

<div class="container">
	<div class="photo">
		<img src="http://www.1stincity.com/4872-12240-medium/new-disney-pixar-moive-cars2-car-models-cars-finn-mcmissile-loose-two043n.jpg" />
		This is the caption
	</div>
	<div class="photo">
		<img src="car02.jpg" />
		Caption here
	</div>
	
	<div class="photo">
		<img src="car03.jpg" />
		Test track
	</div>
	<div class="photo">
		<img src="car04.jpg" />
		Ferrari
	</div>
</div>

CSS

<style>
	.container{width:84px;}
	.photo{width:40px; font-size:80%; text-align:center; vertical-align:top; display:inline-block;}
	
	@media screen and (min-width: 140px) {
	.container{width:42px;}
	}
	@media screen and (min-width: 240px) {
	.container{width:84px;}
	}
	@media screen and (min-width: 640px) {
	.container{width:200px;}
	}
</style>