JSFiddle - React, Tailwind, and code Playground

by otunik

HTML

<div class="container">

	<div class="flex-container">

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=500&h=500&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=500&h=500&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=500&h=500&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=500&h=500&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=500&h=500&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=500&h=500&fit=crop">
		</div>

	</div>

</div>

CSS

.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 10px;
}

.flex-item {
	flex: 1 8em;
	margin: 1em;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	/* object-fit: cover; */
}