JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<script src="&lt;link href=&quot;https://fonts.googleapis.com/css?family=Roboto+Slab&quot; rel=&quot;stylesheet&quot;&gt;"></script>
<div class="scrollPrompt1"></div>
<div class="scrollPrompt2"></div>
<div class="scrollPrompt3"></div>

SCSS

html, body {
	font-family: 'Roboto', sans-serif;
	height: 100%;
	margin: 0;
	position: relative;
}

@keyframes scrolly {
	0% {
		transform: scaleY(0);
		transform-origin: top left;
	}
	49% {
		transform: scaleY(1);
		transform-origin: top left;
	}
	50% {
		transform: scaleY(1);
		transform-origin: bottom left;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom left;
	}
}

.scrollPrompt1 {
	background: transparent;
	border: 1px solid #000;
	border-radius: 15px;
	bottom: 24px;
	box-sizing: border-box;
	height: 48px;
	left: 25%;
	margin: 0 0 0 -10px;
	position: absolute;
	width: 30px;
	&:before {
		border: 1px solid #000;
		border-radius: 3px;
		content: '';
		height: 8px;
		left: 11px;
		position: absolute;
		top: 6px;
		width: 4px;
	}
	&:after {
		background: #000;
		top: -36px;
		content: '';
		height: 24px;
		left: 14px;
		position: absolute;
		width: 1px;
		animation: scrolly 2s infinite;
	}
}

.scrollPrompt2 {
	left: 50%;
	position: absolute;
	width: 50%;
	&:before {
		content: 'scroll';
		font-size: 12px;
		letter-spacing: 0.25em;
		margin: 0 0 0 0.25em;
		text-transform: uppercase;
	}
	&:after {
		
	}
}

.scrollPrompt3 {
	background: transparent;
	border: 1px solid #000;
	border-radius: 15px;
	bottom: 48px;
	box-sizing: border-box;
	height: 48px;
	left: 75%;
	margin: 0 0 0 -10px;
	position: absolute;
	width: 30px;
	&:before {
		border: 1px solid #000;
		border-radius: 3px;
		content: '';
		height: 8px;
		left: 11px;
		position: absolute;
		top: 6px;
		width: 4px;
	}
	&:after {
		background: #000;
		bottom: -36px;
		content: '';
		height: 24px;
		left: 14px;
		position: absolute;
		width: 1px;
		animation: scrolly 2s infinite;
	}
}