JSFiddle - React, Tailwind, and code Playground

by Renra Cikatos

HTML

<div class="ribbonwrap">
    <div class="ribbonwrapinner">
        <div class="ribbontext">DUMET</div>
    </div>
</div>

CSS

/* by team dumetschool.com */
.ribbonwrap {margin: 50px auto; width: 500px; height: 100px; background: #FCF9BF; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3); border:1px solid #333; position: relative; z-index: 90}
.ribbonwrapinner {width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px;}
.ribbontext {font: bold 15px Sans-Serif; color: #FFF; text-align: center; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); position: relative; padding: 7px 0; left: -5px; top: 15px; width: 120px; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3); background: #7abcff; background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7abcff), color-stop(44%,#60abf8), color-stop(100%,#4096ee)); 
background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); background: -o-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); background: -ms-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0)}
.ribbontext:before, .ribbontext:after {content: ""; border-top: 3px solid #293299; border-left: 3px solid transparent; border-right: 3px solid transparent; position:absolute; bottom: -3px}
.ribbontext:before {left: 0;}
.ribbontext:after {right: 0;}