JSFiddle - React, Tailwind, and code Playground

HTML

<div id="primera_seccion_contenedor">
  <div  class="contenido">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

<div id="segunda_seccion_contenedor">
  <div  class="contenido">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

<div class="contenido">
  <div id="contenido_tercera_seccion">
      <!--Aquí va el contenido de la sección -->
  </div>
</div>

CSS

body {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*Dejo el CSS para el contenedor de la primera sección, las demás son iguales solo que cambia
  la imagen del fondo */

#primera_seccion_contenedor {
	position:relative;
	width: 100%;
	min-height: 800px;
	margin: 0;
	padding: 0;
	background: url(http://placekitten.com/800/800) no-repeat center center fixed;
	-khtml-background-size:cover;  /*  Konqueror */
	-webkit-background-size:cover; /* Webkit */
	-moz-background-size:cover;  /* Firefox */
	-o-background-size:cover;  /*  Opera */
	background-size:cover; /* Resto */
}


/*Ahora la div que muestra el contenido, todas son iguales
 Básicamente lo que quiero es que esta div ocupe todo el ancho de la pantalla y se situe en la parte inferior del div padre, de esta forma consigo que se muestre la imagen del fondo del contenedor y haga un efecto parecido al que ando buscando*/

.contenido {
   position: absolute;
   bottom: 0%;
   width: 100%;
   padding-bottom: 100px;
   height: auto;
   margin: auto;
   background-color: rgba(255,255,255, 0.9);
   color: #333;
   box-shadow: 0 0 10px #000;
   border-bottom: 1px solid #999;
}