JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
NAVBAR
</div>


<header>
    <div class="container global"> 
       <div class="row">
            <div class="col-lg-offset-2 col-lg-10-col-md-offset-2 col-md-10 col-sm-offset-2 col-sm-10 hidden-xs back"> 
            </div>
        </div>
       <div class="container bloc_logo_citation">
            <div class="row">
                <div class="col-lg-offset-1 col-lg-2 col-md-offset-1 col-md-2 col-sm-offset-1 col-sm-2 col-xs-offset-3 col-xs-2 logo">
                   LOGO
                </div>
                <div class="col-lg-4 col-md-5 col-sm-6  col-xs-6 citation">
                    <h1>Our work is not about form follows function but <div id="underline"> form follows beauty</div></h1>
                </div>
            </div>
        </div>
    </div>
</header>

CSS

.back 
{
  background-image: url(https://media.istockphoto.com/photos/abstract-cubes-retro-styled-colorful-background-picture-id508795172);
  height: 400px;
  margin-top: 12px;
    
}

/*conteneur 12 col centré sur la page contenant le background, le logo et la citation*/
.global {
  position: relative;
 
}

/*ensemble logo et citation*/
.bloc_logo_citation
{
  position: absolute;
  top: 100px;
  

}
/*bloc logo a 1 col d'offset*/
.logo 
{
	background-color:grey;
  width: 200px;
    height: 200px;
    padding-left: 0px;
}    
/*bloc citation */
.citation 
{
  background-color: black;
  height: 200px;
  opacity: 0.9;

}
/*soulignement de la derniere partie de la citation*/
#underline
{
	text-decoration: underline;
	text-decoration-color: rgb(43,120,166)
}