JSFiddle - React, Tailwind, and code Playground

by Piyush Baliyan

HTML

<div id="outer">
    Workshops<br/>Hello<br/>Hi<br/>Hey
</div>

CSS

#outer{
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}

#outer:after{
position: absolute;
    content: '';
    float:right;
    top:0px;
    right:-50px;
    height: 100%;
    width: 100px;
    background: #333;
    border-right: 20px solid #2E8DEF;
    border-bottom: 3px solid #2E8DEF;
    z-index: -1;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    transform: skew(-30deg);
}