JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<section>
</section>

SCSS

section {
	background: linear-gradient(135deg, #4a2bb4 50%, #15892c 50%);
	width: 200px;
	height: 200px;
	box-shadow: 0 3px 20px rgba(#000, 0.5), 0 0 0 3px rgba(#000, 0.1);
	position: relative;
	overflow: hidden;
	
	&::before {
		position: absolute;
		content: "";
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		box-shadow: inset 0 0 100px #fff;
		mix-blend-mode: overlay;
	}
	
	&::after {
		position: absolute;
		content: "";
		top: 0;
		right: -75%;
		bottom: 0;
		left: -75%;
		background: radial-gradient(ellipse at top, transparent, rgba(#fff, 0.3) 40%, rgba(#fff, 0.15) 40%, transparent 70%);
	}
}

body {
	display: flex;
	margin: 0;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	background: #323244;
}