JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<div class="plan">
	<div class="recommended">
		<div class="ribbon-container">
			<div class="ribbon">
				<div class="text">
					Hey
				</div>
			</div>
		</div>
	</div>
</div>

SCSS

*, *:after, *:before {
	box-sizing: border-box;
}

body {
	font-family: Helvetica;
}

.plan {
	width: 200px;
	height: 300px;
	background: purple;
	position: relative;
	
	.recommended {
		$offset: 5px;
		$color: red;
		$lightRed: orange;
		
		width: 50%;
		height: 0;
		padding-bottom: 50%;
		position: absolute;
		top: 0;
		right: 0;
			
		&:before {
			content: "";
			position: absolute;
			top: -$offset;
			left: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 $offset $offset $offset;
			border-color: transparent transparent darken($color, 10%) transparent;
		}
			
		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			right: -$offset;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: $offset 0 $offset $offset;
			border-color: transparent transparent transparent darken($color, 10%);
		}
		
		.ribbon-container {
			overflow: hidden;
			position: absolute;
			top: -$offset;
			right: -$offset;
			width: 100%;
			height: 100%;

			.ribbon {
				position: absolute;
				top: 50%;
				width: 200%;
				left: 50%;
				transform: translate(-50%, -50%);

				.text {
				  background: linear-gradient(to right, #{lighten($color, 10%)}, #{$color});
					transform-origin: 50% 50%;
					transform: rotate(45deg) translateY(-50%);
					text-align: center;
					padding: 0.5rem;
					color: #fff;
					font-weight: bold;
				}
			}
		}

	}
}