JSFiddle - React, Tailwind, and code Playground

by Dadi Hall

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <header>
      <div class="container-fluid">
         <div class="row">
           <div class="col-md-3 banner-logo text-center">
             <a href="index.html" class="brand-text">webpage</a>
           </div>
           <div class="col-md-9 bg-banner">
           </div>
         </div>
      </div>
    </header>

CSS

.bg-banner {
  background-image: url("https://images.unsplash.com/photo-1560983073-c29bff7438ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1834&q=80") no-repeat center center fixed;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 20vh;
}

.banner-logo {

  background-color: red;
  height: 20vh;
}
 .brand-text{
    font-size: 2em;
    color: white;
}