JSFiddle - React, Tailwind, and code Playground

by Todd Levy

HTML

<div class="crossbar"><span>Widget Title Here</span></div>

CSS

.crossbar {
display: table;
white-space: nowrap;
margin: 1em 0;
width: 100%;
text-align: center;
}


.crossbar:before, .crossbar:after {
background: transparent;
border-top: 1px solid #e5e5e5;
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
}

.crossbar span {
background: #fff;
border: 1px solid #e5e5e5;
padding: .125em .5em .275em;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
border-radius: 0.25em;
font-weight: 700;
}