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="http://i.stack.imgur.com/OzM20.png" alt="logo" />
            </div>
            <div class="logo">
                <img src="http://i.stack.imgur.com/vwMM8.png" alt="logo" />
            </div>
            <div class="logo">
                <img src="http://i.stack.imgur.com/APVYH.png" alt="logo" />
            </div>
            <div class="logo">
                <img src="http://i.stack.imgur.com/6QTA4.png" alt="logo" />
            </div>
        </div>
    </div>
</div>

CSS

body, * {
    position:relative;
    left:0;
    top:0;
    margin:0;
    padding:0;
    border:none;
}
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:#2d2d2d;
    font-weight:bold;
    z-index:0;
}
#text {
    position:relative;
    display:block;
    width:100%;
    font-size: 42px;
    font-family: serif;
    color:#ababab;
    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%;
    display:inline-block;
}
.logo > img {
    width:100%;
    height:100px;
    display:block;
}
.logo:nth-of-type(even) {
    margin:0;
}