JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panels">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
</div>

CSS

.panels {
    position: relative;
    width: 600px;
    height: 200px;
}

.panel {
    position: absolute;
    background: red;
    height: 100%;
    -webkit-transition: width 200ms linear 0, left 200ms linear 0;
}

JavaScript

var panels = Array.prototype.slice.call(document.querySelectorAll('.panel'));

var activeWidth = 40,
    inactiveWidth = (100 - activeWidth) / (panels.length - 1),
    activeSlide = 2;

var left = 0;

for (var panel = 0; panel < panels.length; panel++) {
    var width = panel === activeSlide ? activeWidth : inactiveWidth;
    panels[panel].style.width = width + '%';
    panels[panel].style.left = left + '%';
    panels[panel].style.opacity = .2 + panel * 0.15;
    left += width;
}

document.body.addEventListener('mousemove', function (e) {
    var activeSlide = panels.indexOf(e.target);
    var left = 0;
    
    for (var panel = 0; panel < panels.length; panel++) {
        var width = panel === activeSlide ? activeWidth : inactiveWidth;
        panels[panel].style.width = width + '%';
        panels[panel].style.left = left + '%';
        panels[panel].style.opacity = .2 + panel * 0.15;
        left += width;
    }
});