JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="header">
        <div class="content-wrapper">
            header text
        </div>
    </div>
    <div class="banner">
        <div class="content-wrapper">
            <div class="banner-text-outer">
                <div class="banner-text-inner">
                    <h2>banner text header</h2>
                    <p>banner text paragraph</p>
                </div>
            </div>
        </div>
        <div class="banner-image-wrapper">
            <img src="http://www.brokenbowlakeguide.com/rainbow-trout-1.jpg" />
        </div>
    </div>
    <div class="main-content">
        <div class="content-wrapper">
            main content text
        </div>
    </div>
</body>

CSS

.header, .banner, .main-content { width: 100%; }

.header { background: red;}
.banner { background: green; }
.main-content { background: yellow; }
.content-wrapper {
    margin: 0 auto;
    max-width: 300px;
}

.banner-text-outer {
    position: relative;
}
.banner-text-inner {
    position: absolute;
    top: 10px;
}

.banner-image-wrapper {
    margin: 0 auto;
    max-width: 400px;
    min-width: 300px;
    font-size: 0;
}
.banner-image-wrapper img {
    width: 100%;
}