JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
    A fun exercise brought to you by HTeuMeuLeu
    http://www.hteumeuleu.fr      
    http://www.twitter.com/HTeuMeuLeu       
-->
<div>
    <h1><span>Some dynamic HTML text on several lines with a background that suits well and some margins around it. </span></h1>
</div>

CSS

body { padding:50px; background:#2fa7ca; }
div {background-color: red; width: 640px; height: 360px; display: table-cell; vertical-align: bottom;
padding: 20px;}
h1 { width:480px; font:bold 36px/1 sans-serif; letter-spacing:-1px; color:#000;}

h1{
    background-color:#dddd
        ;
    display:inline;
    white-space:pre-wrap;
    border:0 solid #fff;
    border-width:10px 0;
    position:relative;
    box-shadow: -10px 0 #FFF;
}
h1 span { position: relative; z-index: 1; }
    h1:before{
        content:"";
        position:absolute;
        top:-10px;
        right:100%;
        bottom:-10px;
        width:10px;
        background-color:#fff;
    }