JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="nav nav2"></div>

<div class="hero">
	<div class="hero-clip">
		<div class="nav nav1"></div>
	</div>
</div>

<div class="content"></div>

SCSS

* { margin: 0; padding: 0;}

.hero {
	background: #000;
	height: 200px;
	overflow: hidden;
	left: 0;
	position: relative;
	top: 0;
	z-index: 2;
}

.hero-clip {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	clip: rect(0, auto, auto, 0);
}

.nav {
	border-radius: 50%;
	cursor: pointer;
	height: 100px;
	top: 50px;
	left: 50px;
	width: 100px;
	position: fixed;

	&.nav1 {
		background: #fff;
		z-index: 1;
	}

	&.nav2 {
		background: #000;
		z-index: 1;
	}
}

.content {
	height: 100vh;
	position: relative;
	z-index: 0;
}