JSFiddle - React, Tailwind, and code Playground

by Pritam Bohra

HTML

<div>
	<div class="block-1">Block 1</div>
	<div class="block-2">Block 2</div>
	<div class="block-3">Block 3</div>
	<div class="block-4">Block 4</div>
</div>

CSS

.block-1 {
	width: 100px;
	height: 60px;
	background-color: orange;
	position: relative;
	z-index: 10;
}

.block-2 {
	width: 100px;
	height: 60px;
	background-color: blue;
	margin-top: -20px;
	margin-left: 5px;
	position: relative;
	z-index: 11;
}

.block-3 {
	width: 100px;
	height: 60px;
	background-color: red;
	margin-top: -100px;
	margin-left: 50px;
	position: relative;
	z-index: 12;
}

.block-4 {
	width: 100px;
	height: 60px;
	background-color: green;
	margin-top: -70px;
	margin-left: 80px;
	position: relative;
	z-index: 13;
}