JSFiddle - React, Tailwind, and code Playground

HTML

<section id="nd-gallery">
		<div class="nd-slide nd-slide-current">
			slide 1
		</div>
		<div class="nd-slide nd-slide-next">
			slide 2
		</div>
				
	</section>

CSS

body{
    padding-left:100px;
}

#nd-gallery{
	position:relative;
	height:100px;
	width:100px;
}

#nd-gallery > .nd-slide{
	position:absolute;
    height:100px;
    height:100px;
    outline:1px solid red;
    left:-40px;
}

#nd-gallery > .nd-slide.nd-slide-previous, #nd-gallery > .nd-slide.nd-slide-next, #nd-gallery > .nd-slide.nd-slide-current{
	z-index:4;
}

#nd-gallery > .nd-slide.nd-slide-previous, #nd-gallery > .nd-slide.nd-slide-next{
	z-index:3;
}

#nd-gallery > .nd-slide.nd-slide-current{
	z-index:5;
    left:0;
}

JavaScript

var next = document.querySelector('.nd-slide-next');
    next.style.left = '-50px';
    next.style.transitionProperty = 'left';
   next.style.transitionDuration = '5s';
   next.style.left = '0';