JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="slider-view">
    <div class="slider-item item-1 is-active"><div class="slider-content is-animating">1 dsfd</div></div>
    <div class="slider-item item-2" slide-active="1"><div class="slider-content is-animating">2 sdf</div></div>
    <div class="slider-item item-3"><div class="slider-content is-animating">3 sdf</div></div>                   
</div>

<div class="slider-view">
    <div class="slider-item item-1"><div class="slider-content is-animating">1 dsfd</div></div>
    <div class="slider-item item-2 is-active" slide-active="1"><div class="slider-content is-animating">2 sdf</div></div>
    <div class="slider-item item-3"><div class="slider-content is-animating">3 sdf</div></div>                   
</div>

<div class="slider-view">
    <div class="slider-item item-1"><div class="slider-content is-animating">1 dsfd</div></div>
    <div class="slider-item item-2" slide-active="1"><div class="slider-content is-animating">2 sdf</div></div>
    <div class="slider-item item-3 is-active"><div class="slider-content is-animating">3 sdf</div></div>                   
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.slider-view {
    margin: 0 0 20px;
    display: flex;
    height: 200px;
    transition: all 0.4s ease-out;
}
.slider-item {
    position: relative;
    flex-shrink: 0;
    width: 33.34%;
    height: 100%;
    cursor: pointer;
    user-select: none;
    background: center center no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
}
.slider-item.is-active .slider-content {
    box-shadow: inset 10px 10px 10px coral;
}
.slider-item .slider-content {
    width: 100%;
    height: 100%;
    background: orange;
}
.slider-item.item-1 .slider-content {
    background: #526315;
}
.slider-item.item-2 .slider-content {
    background: #CFE876;
}

/* transform */
/*.slider-item.is-active ~ .slider-item .slider-content {
    transform: translateX(-60%) scale(0.8);
}
.slider-item.is-active ~ .slider-item:nth-child(3) .slider-content {
    transform: translateX(-60%) scale(0.6);
}*/

.slider-item.item-1 .slider-content {
    transform: translateX(60%) scale(0.8);
}

.slider-item.is-active .slider-content {
    transform: translateX(0) scale(1);
}
.slider-item.is-active + .slider-item .slider-content {
    transform: translateX(-60%) scale(0.8);
}
.slider-item.is-active + .slider-item + .slider-item .slider-content {
    transform: translateX(-60%) scale(0.6);
}

.slider-item.item-1:not(.is-active) + .slider-item:not(.is-active) .slider-content {
    transform: translateX(60%) scale(0.8);
}