JSFiddle - React, Tailwind, and code Playground

by Steven Munro

HTML

<div class="container">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 1440 579" enable-background="new 0 0 1440 579" preserveAspectRatio="none" xml:space="preserve">
<defs>
	<mask id="logo_mask2" maskUnits="objectBoundingBox">    
     <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,0c202.515,57.035,457.988,79.5,719.25,79.5
	C977.554,79.5,1238.977,57.146,1440,0c0,192.998,0,386.005,0,579c-205.263-57.544-457.301-79.5-720-79.5
	c-262.732,0-514.747,21.93-720,79.5C0,386.002,0,192.996,0,0z"/>
   	</mask>
</defs>     
<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#f6f4ec" d="M1440,0H0c202.515,57.035,457.988,79.5,719.25,79.5
		C977.554,79.5,1238.977,57.146,1440,0z"/>
    
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#f6f4ec" d="M0,579h1440c-205.263-57.544-457.301-79.5-720-79.5
		C457.268,499.5,205.253,521.43,0,579z"/>
</g>
</svg>
    
<div class="slideshow">
Slideshow
</div>
    
</div>

CSS

.container {

   position:relative;
    background-image: url('http://pluto.kiwi.nz/wp-content/test/watersfunerals.jpg' );
    background-size: cover;
    width:100%;

}

.container svg {
    position:absolute;
}

.slideshow {
    margin: 0 auto;
    height: 300px;
    width: 600px;
   background-color: #eee;
    color: #fff;
    position:relative;
    z-index:100;
}