JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div class="ribbon">FREELANCERS ROOM</div>

CSS

.ribbon{
    width:300px;
    min-height:90px;
    background:#666;
    
    position:relative;
    font-size:36px;
    padding:30px 0;
    color:#fff;
    
    text-align:center;
}
.ribbon:after{
    content:"";
    width: 0;
    height: 0;     
    border-bottom: 30px solid #fff;  /* Sets the height of the triangle*/   
    border-left-style:solid ;  
    border-left-color:transparent;
    border-left-width:150px;
    outline:1px solid #900;
    border-right-style:solid;  
    border-right-color:transparent;
    border-right-width:150px;
    
    position:absolute;
    
    bottom:0;
    right:0;
 }