JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Slider</title>
</head>
<body>
    <div class="slider-block">
        <div id="left-arrow"><span>&lt;</span></div>
        <div id="slider">
            <ul>
                <li class="task">Kyiv <span class="delete">X</span></li>
                <li class="task">Chernihiv<span class="delete">X</span></li>
                <li class="task">Lissabon <span class="delete">X</span></li>
                <li class="task">Praha <span class="delete">X</span></li>
                <li class="task">Amsterdam<span class="delete">X</span></li>
                <li class="task">Vilnus <span class="delete">X</span></li>
                <li class="task">Marocco <span class="delete">X</span></li>
            </ul>
        </div>
        <div id="right-arrow"><span>&gt;</span></div>
    </div>

    <div id="add-block">
        <input type="text"> <button class="add">Add</button>
        <ul id="addTask"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

#left-arrow,
#right-arrow,
#slider{
    border: 1px solid black;
    position: absolute;
}

#slider{
    width: 80%;
    height: 50%;
    left: 10%;
    position: absolute;
    top: 25%;
    overflow: hidden;
}

#slider ul {
    transition: transform .3s ease;
}

#left-arrow,
#right-arrow{
    width: 5%;
    height: 50%;
    position: absolute;
    top: 25%;
    cursor: pointer;
}


#left-arrow span,
#right-arrow span{
    margin: 40% auto;
    display: table;
    font-size: 14px;
}


#left-arrow{
    left: 4%;
}

#right-arrow{
    right: 4%;
}

.slider-block{
    position: relative;
    padding: 50px 10px;
    border:1px solid grey;
    top:100px;
    width: 450px;
    margin: 0 auto;
}

ul{
    display: inline-flex;
    padding: 0;
    position: absolute;
    margin-left: 0;
}

li{
    list-style: none;
    border: 1px solid black;
    width: max-content;
    margin-left: 10px;
}

li span{
    cursor: pointer;
}

#add-block{
    width: 300px;
    border: 1px solid grey;
    position: absolute;
    top: 50%;
    height: 300px;
}

.add{
    border: 1px solid grey;
    padding: 3px;
    cursor: pointer;
}

input{
    margin-left: 10px;
    margin-top: 10px;
}

.delete{
    padding: 0px;
    border: 1px solid red;
    color: red;
    float: right;
}

#addTask{
    display: block;
    padding: 10px;
    width: initial;
}

#addTask li {
    padding: 5px;
    width: fit-content;
}

.newTask{
    cursor: pointer;
}


.invisible{
    opacity : 0;
    pointer-events : none;
    width : 0;
}

JavaScript

var leftArrow = document.getElementById('left-arrow');
var rightArrow = document.getElementById('right-arrow');
var li = document.querySelectorAll('li');
var newLi = Array.prototype.slice.call(li);
var ul = document.querySelector('ul');
var slider = document.getElementById('slider');

//bullshit Slider =)

document.onclick = function(){
    console.log(event)
}

var c = getComputedStyle(newLi[0]);
var m = c.marginLeft;

var currentPos = 0;
leftArrow.addEventListener('click', function () {
    var ul = document.querySelector('#slider ul');
    var firstEl = ul.querySelector('.task:not(.hidden)');
    var firstElRect = firstEl.getBoundingClientRect();
    currentPos = currentPos - (parseInt(m, 10) + firstElRect.width);
    ul.style.transform = 'translateX(' + currentPos + 'px)';
    firstEl.classList.add('hidden');
}) 

// rightArrow.addEventListener('click', function slideRight(event){
    
// })

var input = document.querySelector('input');
var button = document.querySelector('button');
var add = document.getElementById('addTask');
var x = document.getElementsByClassName('delete');
var spanX = document.querySelectorAll('li > span');
var newSpanX = Array.prototype.slice.call(spanX);

//transfer task from input-block to slider

var addBlock = document.getElementById('add-block');
addBlock.addEventListener('click', function clickk(){
    if(event.path[0]){
        console.log('a')
        
    }
})

button.addEventListener('click', function Add() {
    var newLi = document.createElement('li');
    newLi.classList.add('newTask');
    newLi.innerHTML = input.value;
    var k = document.createElement('span');
    k.classList.add('delete')
    k.innerHTML = 'X';
    add.appendChild(newLi);
    newLi.appendChild(k)
    k.classList.add('invisible')
    newLi.addEventListener('click', function addTaskToSlider(event){
        newTask = event.path[0];
        newTask.classList.remove('newTask');
        newTask.classList.add('task');
        ul.appendChild(newTask); 
       ...