JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
  </head>

  <body>
    <div id=triangle1></div>
    <div id=triangle2></div>
    <div id=triangle3></div>
    <a class=sd>Scroll Down</a>
  </body>

</html>

CSS

body {
			margin: 0px;
			padding: 0px;
			background: #181818;
			font-family: sans-serif;
			overflow-x: hidden;
		}
		#triangle1 {
			position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #484848;
	top: 25%;
	left: 42.5%;
	z-index: -2;
		}
		#triangle2 {
			position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #383838;
	top: 25%;
	left: 47.5%;
	z-index: -2;
		}
		#triangle3 {
			position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #282828;
	top: 25%;
	left: 52.5%;
	z-index: -2;
		}
		a.sd {
			font-size: 20px;
			color: rgba(255, 255, 255, 0.2);
			display: block;
			position: absolute;
			top: 60%;
			width: 100%;
			text-align: center;
		}