JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

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

CSS

body { padding:50px; background:#2fa7ca; }
h1 { width:480px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; }

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