JSFiddle - React, Tailwind, and code Playground

by Poftorek

HTML

<div class="ribbon-ips"><span>Premium</span></div>

CSS

.ribbon-ips {
position: absolute;
left: -4px;
top: -6px;
z-index: 99999999999;
overflow: hidden;
width: 80px;
height: 80px;
text-align: right;

} 
 .ribbon-ips span::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #47a3d1;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #47a3d1;
}


.ribbon-ips span{
font-size: 11px;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 25px;
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
width: 100px;
display: block;
background: #47a3d1;
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px;
left: -21px;
text-transform: uppercase;
}

.ribbon-ips span:before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #47a3d1;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #47a3d1;
}
.post .post_author {
    padding: 1em;
    overflow: initial !important;
}