JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div class="wrapper">
	<div class="ribbon-wrapper-green">
		<div class="ribbon-green">NEWS</div>
	</div>
</div>

SCSS

.wrapper {
	margin: 50px auto;
	width: 280px;
	height: 370px;
	background: white;
	border-radius; 10px;
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 0 8px rgba(0,0,0,0.3);
	box-shadow: 0 0 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90;
	.ribbon-wrapper-green {
		width: 85px;
		height: 88px;
		overflow: hidden;
		position: absolute;
		top: -3px;
		right: -3px;
		.ribbon-green {
			font: bold 15px Sans-Serif;
			color: #333;
			text-align: center;
			text-shadow: rgba(255,255,255,0.5) 0 1px 0;
			-webkit-tranform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			transform: rotate(45deg);
			position: relative;
			padding: 7px 0;
			left: -5px;
			top: 15px;
			width: 120px;
			background-color: #BFDC7A;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to (#8EBF45));
			background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
			background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
			background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
			background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
			background-image: linear-gradient(top, #BFDC7A, #8EBF45);
			color: #6A6340;
			-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3);
			-moz-box-shadow: 0 0 3px rgba(0,0,0,0.3);
			box-shadow: 0 0 3px rgba(0,0,0,0.3);
			&:before, &:after {
				content: "";
				border-top: 3px solid #6E8900;
				border-left: 3px solid transparent;
				border-right: 3px solid transparent;
				position: absolute;
				bottom: -3px;
			}
			&:before {
				left: 0;
			}
			&:after {
				right: 0;
			}
		}
	}
}