JSFiddle - React, Tailwind, and code Playground
HTML
<div id="index-slideshow">
<img src="http://lorempixel.com/400/200">
<img src="http://lorempixel.com/g/400/200">
</div>
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit magna tempor dignissim porta. Phasellus tincidunt dolor arcu, sit amet laoreet dolor iaculis semper. Proin iaculis bibendum libero ac condimentum. Aenean tincidunt lectus orci, non posuere nibh volutpat a. Fusce vel eros purus. Vivamus sodales elementum augue et blandit. Ut mollis pretium odio a aliquam. Morbi ut mi imperdiet, faucibus sem quis, facilisis odio. Fusce gravida, massa fermentum blandit porta, est felis ultricies ante, porta pellentesque eros urna nec elit. Sed ut arcu ante. Praesent dictum dui eget ligula ultricies, vel mattis magna blandit. Suspendisse imperdiet molestie orci id aliquet. Curabitur leo ante, maximus tempus suscipit vitae, semper vestibulum turpis. Sed tellus justo, mollis at ante ac, finibus pellentesque sem. Pellentesque accumsan dui et rhoncus porttitor. Curabitur fermentum ligula diam, quis euismod lacus posuere in.</p>
</div>
CSS
#index-slideshow {
margin: 0px;
position: relative;
width: 100%;
padding: 0px;
max-width:100%;
box-sizing:border-box;
z-index:-1;
}
#index-slideshow > img {
position: absolute;
top: 0px;
left: 0px;
width:100%;
max-width:100%;
margin:auto;
box-sizing:border-box;
}
.wrap {
margin:0 auto;
width: 950px;
max-width:93%;
border:0px;
padding:0px 10px 10px 10px;
background-color:blue;
color:white;
}
JavaScript
// You can see that "index-slideshow" has height=0px