JSFiddle - React, Tailwind, and code Playground

by Lucas Krause

HTML

<header id="header">
    <h1>Subtitle<br />Press</h1>
    <div class="stroke"></div>
</header>
<section id="content">Content</section>

CSS

:root {
    font-family:"Helvetica Neue", Helvetica, sans-serif;
    line-height:1.5;
    font-size:100%;
}

#header {
    font-size:2em;
}
#header::after {
    content:"";
    display:table;
    clear:both;
}

#header h1 {
    float:left;
    text-transform:uppercase;
    color:#7f7f7f;
    font-weight:500;
    line-height:1;
    border-bottom:solid #7f7f7f 1px;
    margin:0;
    font-size:1em;
    padding:0 5px 5px 0;
}
#header h1::first-line {
    font-weight:400;
    font-size:.5em;
}

#header .stroke {
    position:relative;
    overflow:hidden;
    height:1.5em;
    padding-bottom:6px; /*5+1*/
}
#header .stroke::after,
#header .stroke::before {
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:10px;
    bottom:0;
    left:0;
    border:solid #7f7f7f 1px;
    border-right-width:0;
    border-bottom-color:#fff;
}
#header .stroke::before {
    border-bottom-width:0;
}
#header .stroke::after {
    left:10px;
    bottom:10px;
}

#content {
    text-align:center;
    color:#fff;
    background-color:#d9d9d9;
    font-size:1.5em;
    text-transform:uppercase;
    padding:1em;
    margin-top:1em;
}