JSFiddle - React, Tailwind, and code Playground

by Sedbol

HTML

<button class="button">Кнопка</button>
<div class="wraper">
    <div class="window">
        <ul class="list">
            <div class="bor"><img class="ava_get" src="https://picsum.photos/id/31/100/100" ></div>
            <div class="bor"><img class="ava_get"  src="https://picsum.photos/id/32/100/100" ></div>
            <div class="bor"><img class="ava_get"  src="https://picsum.photos/id/33/100/100"> </div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatar-100/kartinki/865.jpg" ></div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatarki/7/kartinki/178-2.jpg" ></div>
            <div class="bor"><img class="ava_get"  src="http://avotarov.net/picture/avatarki/7/kartinki/176-2.jpg" ></div>
        </ul>
    </div>
</div>

JavaScript

window.onload=(function () {
        for (i = 0; i < 3; i++) {
            $(".list .bor").clone().appendTo(".list");
        }
        var button =document.querySelector('.button');
        var win =document.querySelector('.window');
        button.onclick=function(){
            win.style.top="0";
            var y = 10;
            $('.window').animate({
                top: (-(y*100)+(y*5-10)-100)
            }, 1000);
        };
    });