JSFiddle - React, Tailwind, and code Playground

HTML

<div>
     <h3>
           Some text  that expands the container
    </h3>
</div>

CSS

* {
    padding:0 margin:0;
}
body {
    margin:20px;
}
div {
    display:table;
    position:relative;
    z-index:2;
    overflow:hidden;
}
h3 {
    display:table-cell;
    position:relative;
    float:left;
    z-index:1;
    top:-10px;
    left:0px;
    font:bold 20px Verdana;
    white-space:nowrap;
    color:#ccc;
    -moz-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
     -ms-transform:rotate(-2deg);
    background-color:#000;
    padding:30px 20px 10px;
    overflow:hidden;
}
h3:before{
   content:"";
    border-style: solid;
    border-width: 150px 0 0 50px;
    border-color: transparent transparent transparent #fff;
    position:absolute;
    left:0;
    top:0;
}
h3:after{
   content:"";
    border-style: solid;
    border-width: 150px 50px 0 0;
    border-color: transparent #fff transparent transparent;
    position:absolute;
    right:0;
    top:0;
}