JSFiddle - React, Tailwind, and code Playground

by Federico Tibaldo

HTML

<aside>
	<h1 class="grey">
		Recent Photos
	</h1>
	<p class="grey-darker">
		A collection of the photos and pictures you liked in the past few days.
	</p>
	<br/>
	<small class="grey-darker">
		Powered by <a href="https://picsum.photos/" target="blank">Lorem Picsum</a><br>
		© Federico Tibaldo, 2018<br>
		MIT license<br>
	</small>
</aside>
<div class="gallery">
	<div class="column">
		<h2 class="grey">
			Sunday
		</h2>
		<div class="container">
			<div class="card">
				<img src="https://picsum.photos/320/240/?random"/>
			</div>
		</div>
		<div class="container">
			<div class="card">
				<img src="https://picsum.photos/320/240/?random=1"/>
			</div>
		</div>
	</div>
</div>

CSS

*, *::before, *::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	background-color: #efefef;
	line-height: 1.5;
	font-size: 1.25rem;
}

.grey {
	color: #a2a2a2;
}

.grey-darker {
	color: #8d8d8d;
}

aside {
	width: 320px;
	padding: 2rem;
	float: left;
}

.gallery {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
}

.column {
	display: flex;
	flex-direction: column;
	padding: 2rem;
}

.container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card {
	border-radius: 0.25rem;
	box-shadow: 0px 4px 4px rgba(0,0,0,.25);
	line-height: 0;
	margin-bottom: 2rem;
}