JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="scroller-wrapper">
   <div id="scroller">
    <div id="image1" class="img-defile">
      <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1328080590-thumb.jpg&width=250&height=200"/>
    </div>
   </div>
  </div>
  
    <div id="dossiers-projets">
    <span id="cellule1" class="accordeon">
      cellule1
    </span>
    <span id="cellule2" class="accordeon">
      cellule2
    </span>
    <span id="cellule3" class="accordeon">
      cellule3
    </span>
    <span id="cellule4" class="accordeon">
      cellule4
    </span>
    <span id="cellule5" class="accordeon">
      cellule5
    </span>
  </div>
  
</body>

CSS

body {
	top:0;
	left:0;
	width:105vw;
	height:100%;
	margin:0;
	padding:0;
	background-color:#FFFFFF;
	overflow-y:hidden;
	overflow-x:hidden;
}

* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}


#scroller-wrapper{
  position:absolute ; 
  top : 0; 
  left: 0 ; 
  height:100% ;
  width:102vw;
  background-color:#efefef ; 
  text-align:center ;
	overflow-y:scroll;
	overflow-x:hidden;
}

.img-defile{
 max-width:100%;
height:auto;
display:inline-block;
position:absolute;
overflow:hidden;
margin:32%;
}

#image1 {
  z-index:30 ; 
}

.img-defile img {
width:600px;
}

#dossiers-projets {
  position:absolute ;  
	bottom:0;
	left:0;
	width:100%;
	background-color:#FFFFFF;
}

.accordeon{  
 background-color:#FFFFFF;
font-family:Space Mono, monospace;
color:#000000;
font-size:1.25vw;
line-height:1.5vw;
cursor:pointer;
padding:1vw;
width:100%;
text-align:left;
border-top:0.5px solid black;
border-collapse:collapse;
position:relative;
display:inline-block;
outline:none;
}

#cellule1 {
  z-index:10;
}

#cellule2 {
  z-index:20;
}

#cellule3 {
  z-index:30;
}

#cellule4 {
  z-index:40;
}

#cellule5 {
  z-index:50;
}