slider tailwind css

1<div class="relative">
2    <div class="absolute inset-0 w-screen h-screen bg-pink-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-0 slide">Hello</div>
3    <div class="absolute inset-0 w-screen h-screen bg-purple-500 text-white flex items-center justify-center text-5xl transition-all ease-in-out duration-1000 transform translate-x-full slide">There</div>
4</div>
5
6<script>
7setTimeout(function(){
8    let activeSlide = document.querySelector('.slide.translate-x-0');
9    activeSlide.classList.remove('translate-x-0');
10    activeSlide.classList.add('-translate-x-full');
11    
12    let nextSlide = activeSlide.nextElementSibling;
13    nextSlide.classList.remove('translate-x-full');
14    nextSlide.classList.add('translate-x-0');
15}, 3000);
16</script>