JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

CSS

body {
    margin: 0;
    display: flex;
}

* {
    box-sizing: border-box;
}

div {
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid black; */
    /* background: red; */
    animation: a 1s ease 1s both;
    display: inline-block;
}
span {
    flex: 100%;
    width: 100%;
    height: 100%;
    background: red;
}

@keyframes a {
    100% {
        transform: translate3d(0, 0, 0);
    }
}

JavaScript

function b(elems) {
    for (var i = 0; i < elems.length; i++) {
        var calc = (window.innerWidth / 2) - (elems[i].clientWidth + elems[i].offsetLeft) + (elems[i].clientWidth / 2);
        elems[i].style.transform = `translate3d(${calc}px,0,0)`
        console.log(calc);
    }
}
b(document.querySelectorAll('.test'))