JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    
    <svg version="1.1" id="arrow_r" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="26px" viewBox="0 0 14 26" enable-background="new 0 0 14 26" xml:space="preserve"> <path d="M1,0c0.256,0,0.512,0.098,0.707,0.293l12,12c0.391,0.391,0.391,1.023,0,1.414l-12,12c-0.391,0.391-1.023,0.391-1.414,0s-0.391-1.023,0-1.414L11.586,13L0.293,1.707c-0.391-0.391-0.391-1.023,0-1.414C0.488,0.098,0.744,0,1,0z"></path> </svg>
    
    <div id="inspiration">
        <img src="borabora.jpeg" alt="Bora Bora" id="left">
        <img src="mallorca.jpg" alt="Mallorca" id ="center">
        <img src="bali.jpg" alt="Bali" id="right">
        <img src="montenegro.jpg" alt="Montenegro" class="hidden">
        <img src="maldives.jpg" alt="Maldives" class="hidden">
    </div>
    
    
    <script src="test.js"></script>
</body>
</html>

CSS

#inspiration{
    position: relative;
}

img{
    width:300px;
    height:200px;
    display: inline-block;
    margin: 0;
    padding: 0;
    transition: all 1s, opacity 2s;
    background:grey
}

svg{
    cursor: pointer;
}

.hidden{
    opacity: 0;
    transform: scale(0.7);
    z-index: 0;
}

.hidden_l{
    opacity: 0;
    transform: scale(0.7);
    position: absolute;
    left: -40px;
    top: 100px;
}

.hidden_r{
    opacity: 0;
    transform: scale(0.7);
    position: absolute;
    top: 100px;
    left: 500px;
}

#left, #right{
    transform: scale(0.7);
    opacity: 1;
    z-index: 1;
}

#left{
    position: absolute;
    left: -40px;
    top: 100px;
}

#center{
    position: absolute;
    top: 70px;
    left: 230px;
    transform: scale(1);
    opacity: 1;
    z-index: 2;
}

#right{
    position: absolute;
    top: 100px;
    left: 500px;
}

JavaScript

var arrow_r = document.getElementById('arrow_r');
var right = document.getElementById('right');
var left = document.getElementById('left');
var center = document.getElementById('center');
var hiddens = Array.from(document.getElementsByClassName('hidden'));


arrow_r.addEventListener('click', function(){
    var hidden = hiddens.shift();
    hidden.className = 'hidden_l';
    center.id = 'right';
    left.id = 'center';
    hidden.id = 'left';
    hidden.className = '';
    right.className = 'hidden_r';
    right.id = '';
    hiddens.push(right);
    right = document.getElementById('right');
    left = document.getElementById('left');
    center = document.getElementById('center');
});