JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner">
    <div class="logo">
        <h1><a href="#">Abyk<span id="red">Deco<span></a></h1>
    </div>

    <div class="heading">
        <h1>ABYK DECO</h1>
        <h4>We make your dream home come true!</h4>
    </div>

</div>

<main>
  Main content goes here
</main>

CSS

BODY {
   background: brown;
 }
 
 
 .banner{
    height: 100%;
    min-height: 100vh;
    background-image: url(../img/1.jpeg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;  
    flex-direction: column;
}  

.logo {
    color: #fff;
    font-size: 2em;
    font-family: 'Oswald', sans-serif;
    align-self: center;
}   

.logo a{
    color: #fff;
}

.logo H1 {
  margin-top: 0;
}

#red{
    color: red;
}

.heading {
    font-family: 'PT Sans', sans-serif;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
}

.heading h1{
    font-size: 4.5em;
}

.heading h4{
    font-size: 2em;
}



MAIN {
  min-height: 100vh;
  background: rgba(250, 250, 205, .7);
}