JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <img src="http://i.stack.imgur.com/kx83o.jpg" alt="http://www.hdwallpapers.in/walls/in_shoes-wide.jpg" />
    <div id="text-and-logos">
        <h1 id="text">
            Shoes for all occasions
        </h1>
        <div id="logo-container">
            <div class="logo">
                <img src="" alt="logo" />
            </div>
            <div class="logo">
                <img src="" alt="logo" />
            </div>
            <div class="logo">
                <img src="" alt="logo" />
            </div>
            <div class="logo">
                <img src="" alt="logo" />
            </div>
        </div>
    </div>
</div>

CSS

body, * {
    position:relative;
    left:0; top:0;
    margin:0;
    padding:0;
    border:none;
}
.container {
        
}
img {
    width:100%;
}
#text-and-logos {
    position:absolute;
    left:45%;
    width:50%;
    height:100%;
    padding-top:10%;
}
#text::before {
    content:"Shoes for all occasions";
    position:absolute;
    width:100%;
    font-size: 42.2px;
    color:#3e3e3e;
    font-weight:bold;
    z-index:0;
}
#text {
    position:relative;
    display:block;
    width:100%;
    font-size: 42px;
    font-family: serif;
    color:#fefefe;
    z-index:2;
}
#logo-container {
    position:relative;
    width:100%;
    height:auto;
    display:block;
    padding-top:5%;
}
.logo {
    position:relative;
    width:161px;
    min-width:
    margin-right:2.5%;
    background:#2d2d2d;
    display:inline-block;
}
.logo > img {
    width:100%;
    height:100px;
    display:block;
}
.logo:nth-of-type(even) {
    margin:0;
}