JSFiddle - React, Tailwind, and code Playground

by gionaf

HTML

<div class="main-container">
    <h1 class="headline">
        <span>&nbsp;</span>
        <span>OUR LATEST WORKS</span>
        <span>&nbsp;</span>
    </h1>
</div>

CSS

body {
    background:url("http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/tiny_grid.png");
}
.main-container {
    width: 600px;
    margin: 0 auto;
    box-shadow:0 0 5px #d00;
}
.headline {
    width:100%;
    font: normal 33px Georgia, "Times New Roman", Times, serif;
    color: #3E3E3E;
    display:table;
    text-align:center;
}
.headline > span {
    display:table-cell;
}
.headline > span:nth-child(2) {
    width:50%;
    padding:0 0.2em;
    white-space:nowrap;
    line-height:1.2em;
}
.headline > span:nth-child(1), .headline > span:nth-child(3) {
    border-top:1px solid #CCC;
    width:25%;
    position:relative;
    top:0.6em;
}