JSFiddle - React, Tailwind, and code Playground

by Owen Hartley

HTML

<div class="book">
	<div class="page 1">Front Cover</div>
	<div class="page 2">1</div>
	<div class="page 3">2</div>
	<div class="page 4">3</div>
	<div class="page 5">4</div>
	<div class="page 6">5</div>
	<div class="page 7">6</div>
	<div class="page 8">7</div>
	<div class="page 9">8</div>
	<div class="page 10">9</div>
	<div class="page 11">10</div>
	<div class="page 12">Back Cover</div>
</div>

CSS

.book {
	position: relative;
}

.page {
	position: absolute;
	left: 0;
	top: 0;
	width: 192px;
	height: 256px;
	background-color: white;
	box-shadow: 0px 8px 64px black;
}

.page:nth-child(odd) {
	left: 192px;
}