JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div id="scroller-wrapper" class="scroller-wrapper" style="z-index:5">
   <div id="scroller" class="scroller slidedown">
	     <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="scroller-wrapper" class="scroller-wrapper" style="z-index:5">
   <div id="scroller" class="scroller slidedown">
	     <div id="image2" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880557-thumb.jpg&width=250&height=200"/>
				</div>
    </div>
 </div>

 <div id="scroller-wrapper" class="scroller-wrapper" style="z-index:5">
    <div id="scroller" class="scroller slidedown">
 	     <div id="image3" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880613-thumb.jpg&width=250&height=200"/>
				</div>
    </div>
 </div>

 <div id="scroller-wrapper" class="scroller-wrapper" style="z-index:5">
    <div id="scroller" class="scroller slidedown">
 	     <div id="image4" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1277880655-thumb.jpg&width=250&height=200"/>
				</div>
    </div>
 </div>

 <div id="scroller-wrapper" class="scroller-wrapper" style="z-index:5">
    <div id="scroller" class="scroller slidedown">
 	     <div id="image5" class="img-defile">
	        <img src="http://www.cascades-du-herisson.fr/library/resizer-jpeg.php?src=../photos/photo-article-1277880555-1280753327-thumb.jpg&width=250&height=200"/>
				</div>
    </div>
 </div>

 <div id="scroller-wrapper" class="scroller-wrapper" style="z-index:60">
    <div id="scroller" class="scroller slidedown">
 	     <div id="image6" class="img-defile">
	        <img...

CSS

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


#scroller-wrapper {
	top:0;
	left:0;
	width:102vw;
	height:1000%;
	position:absolute;
	overflow-y:scroll;
	overflow-x:hidden;
	transform: scale(1, -1);
}


#scroller {
	max-width:100%;
	width:100%;
	height:250%;
	position:relative;
	display:block;
	transform: scale(1, -1);
}


.slidedown {
 animation-duration:30s;
 animation-name: slidedown;
 animation-timing-function:linear;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
}

@keyframes slidedown {

 0% {
		  bottom:-1%;
	  }

 100% {
		  bottom: 250%;
	  }
}


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

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


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


#dossiers-projets .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;
outline: none;
border-collapse:collapse;
position:relative;
}


div.contenu {
	border-top:0.5px solid black;
	padding:1vw;
	background-color:#FFFFFF;
	display:none;
	font-family:Space Mono, monospace;
	font-size:1vw;
	line-height:1.5vw;
	color:#000000;
	text-align:left;
}


div .accordeon.cellule1 {
	z-index: 10;
}

div .accordeon.cellule2 {
	z-index: 20;
}

div .accordeon.cellule3 {
	z-index: 30;
}

div .accordeon.cellule4 {
	z-index: 40;
}

div .accordeon.cellule5 {
	z-index: 50;
}


div.accordeon.active, div.accordeon:hover {
cursor:pointer;
}

JavaScript

jQuery(document).ready(function($) {

$('#scroller').scroll(function () {
    if ($(this).scrollTop() > 0) {
        $('#scroller').addClass("custom-scroll");
        } else {
        $('#scroller').removeClass("custom-scroll");
        }
});


$('.img-defile').each(function(i) {
    $pT=$("#scroller").height();
    $pL=$("#scroller").width();
    $(this).css({
        top:Math.floor(Math.random()*$pT),
        left:Math.round(Math.random()*$pL)
        });
});



var acc = document.getElementsByClassName("accordeon");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");

        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}

});