JSFiddle - React, Tailwind, and code Playground

HTML

<body >
 	<a class="navigation">
 		<center>

			<div id="diamond"></div>
			<div id="diamond"></div>

		 	<div id="diamond" href="/photos/"></div>
		 	<div id="diamond_red"></div>
		 	<div id="diamond" href="/projects/"></div>

			<div id="diamond"></div>
			<div id="diamond"></div>

		 	<div id="diamond" href="/archive/"></div>

	</center>
 	</a>

    {% unless page.no_footer %}
    <footer>
    </footer>
  </body>

CSS

body {
        background:black; color:#000000;
        font:13px georgia, serif;
        line-height:1.4;
        font-weight: lighter;
        text-rendering: optimizelegibility;
}

#diamond {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: white;
	position: relative;
	top: -50px;
}
#diamond:after {
	content: '';
	position: absolute;
	left: -50px;
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: white;
}

#diamond_red {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-bottom-color: #AA1C08;
	position: relative;
	top: -50px;
}
#diamond_red:after {
	content: '';
	position: absolute;
	left: -50px;
	top: 50px;
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top-color: #AA1C08;
}