JSFiddle - React, Tailwind, and code Playground

by stedman

HTML

<div class="wrapper">
    <div class="ribbon-wrapper">
        <div class="ribbon">TEST</div>
    </div>
</div>

CSS

/* Adapted from http://jsfiddle.net/chriscoyier/H6rQ6/1/ */
.wrapper {
	-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);
	background: white;
	border-radius: 10px;
	height: 370px;
	margin: 70px auto;
	position: relative;
	width: 280px;
	z-index: 90;
}
.ribbon-wrapper {
	height: 62px;
	overflow: hidden;
	position: absolute;
	right: -2px;
	top: -2px;
	width: 62px;
}
.ribbon {
	-webkit-transform: rotate(45deg);
	-moz-transform:    rotate(45deg);
	-ms-transform:     rotate(45deg);
	-o-transform:      rotate(45deg);
	transform:         rotate(45deg);
	color: #333;
	font: bold 13px Sans-Serif;
	left: -2px;
	padding: 7px 0;
	position: relative;
	text-align: center;
	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	top: 5px;
	width: 88px;

	/*Generated by http://www.colorzilla.com/gradient-editor/ */
	background: #ee9311; /* Old browsers */
	background: -webkit-linear-gradient(135deg, #fff1d6 0%, #fefcea 11%, #ee9311 44%); /* Chrome10+,Safari5.1+ */
	background:    -moz-linear-gradient(135deg, #fff1d6 0%, #fefcea 11%, #ee9311 44%); /* FF3.6+ */
	background:     -ms-linear-gradient(135deg, #fff1d6 0%, #fefcea 11%, #ee9311 44%); /* IE10+ */
	background:      -o-linear-gradient(135deg, #fff1d6 0%, #fefcea 11%, #ee9311 44%); /* Opera 11.10+ */
	background:         linear-gradient(135deg, #fff1d6 0%, #fefcea 11%, #ee9311 44%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff1d6', endColorstr='#ee9311', GradientType=1 ); 
	/* IE6-9 fallback on horizontal gradient */
}
.ribbon:before, .ribbon:after {
	content: "";
	border-top:   2px solid #6e8900;   
	border-left:  2px solid transparent;
	border-right: 2px solid transparent;
	position:absolute;
	bottom: -2px;
}
.ribbon:before {
	left: 0;
}
.ribbon:after {
	right: 0;
}