JSFiddle - React, Tailwind, and code Playground

by Andrew Dunai

HTML

<div class="background">
    <img src="http://www.allabouthappylife.com/wallpaper/widescreen_wallpapers/palm-trees/grass-palms-forest-dsc04919-ws.jpg" />
    <div class="gradient"></div>
</div>

<div class="content">
<h1>Test</h1>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
<p>Asd</p>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
}

.background {
    position: absolute;
    z-index: -1;
}

.background img {
    width: 100%;
    height: auto;
}

.background .gradient {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.content {
    padding: 1rem;
}