JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="will-show">
    <div class="Player"></div>
    <div class="Player"></div>
    <div class="Player"></div>
    <div class="Player"></div>
    <div class="Player"></div>
</div>

CSS

.will-show {
    display: flex;
}

.Player {
    height: 200px;
    background: red;
    width: 20%;
}

JavaScript

const c = document.querySelectorAll('.will-show .Player');

function b(elem) {
    const calc = (window.innerWidth / 2) - (elem.clientWidth + elem.offsetLeft) + (elem.clientWidth / 2);
    elem.style.transform = `translate3d(${calc}px,0,0)`;
}
for (let i = 0; i < c.length; i++) {
    b(c[i])
}