JSFiddle - React, Tailwind, and code Playground

HTML

<div class="promo">
     <h1 class="tit_header">
        <span class="line_01">
            <span class="linhaAzul_box"><span class="linha"></span></span>
            <span class="text_tit">Titulo Grande de Mais</span>
            <span class="linhaAzul_box"><span class="linha"></span></span>
        </span>
    </h1>

</div>

CSS

.promo {
    display:block;
    float:left;
    width:100%;
    height:200px;
    background-image:url(http://s0.ejesa.ig.com.br/portal/images/2012-07/1.461037.jpg);
    background-size:cover;
    background-position:center center;
}
h1 {
    width:100%;
    text-align:center;
}
h1.tit_header {
    width:80%;
    margin:80px 15% 10px 15%;
    color:#FFF;
}
.line_01, .line_02, .line_03 {
    display:block;
    width: 100%;
    clear:both;
    font-size:1em;
}
.line_01 {
    display: table;
    width:80%;
    margin:0 10%;
    text-align:center;
}
.line_01 > span {
    display: table-cell;
}
.text_tit {
    padding: 0 10px;
    white-space: nowrap;
}
.linhaAzul_box {
    width: 50%;
    height:40px;
}
.linha{
	display:block;
	width:100%;
	height:5px;
	background-color:#fff;
	margin-bottom: 5px;
}