JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div></div>
<div></div>

SCSS

@mixin small-stripes($color) {
	background: $color;
	background: repeating-linear-gradient(
			-45deg,
			darken($color, 4%),
			darken($color, 4%) 2px,
			$color 3px,
			$color 5px
		);
	//background-size: 5px;
}

div {
	background: repeating-linear-gradient(
			-45deg,
			darken(#efb22d, 4%),
			darken(#efb22d, 4%) 1px,
			#efb22d 2px,
			#efb22d 4px
		);
	height: 50vh;
}

div:nth-child(2) {
	border-top: 5px solid rgba(0,0,0,0.25);
	background: repeating-linear-gradient(
			-45deg,
			darken(#efb22d, 4%),
			darken(#efb22d, 4%) 2px,
			#efb22d 3px,
			#efb22d 5px
		);
}

body, html {
	margin: 0;
}