JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Some data</h1>

CSS

h1{
    margin: 50px;
    display:inline-block;
    position:relative;
    z-index:1;
    padding:10px 50px 10px;
    color:red;
    border: 1px solid #ccc;
    background: #fff;
}
h1:before{
    content:'';
    width:100%; height:100%;
    position:absolute;
    top:-1px; left:0;
    background:red;
    z-index:-1;
    border: 1px solid #ccc;
    -webkit-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    transform: skewX(-20deg);
    
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    background: #fff;
}