JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class="photo_slider autoplay"><input class="slide-radio1" id="slider_1" name="slider" type="radio" checked=""> <input class="slide-radio2" id="slider_2" name="slider" type="radio"> <input class="slide-radio3" id="slider_3" name="slider" type="radio"><div class="slider-pagination"><label class="page1" for="slider_1"></label><label class="page2" for="slider_2"></label><label class="page3" for="slider_3"></label></div><div class="control next"><label class="numb1" for="slider_1"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M298.3 256L131.1 81.9c-4.2-4.3-4.1-11.4.2-15.8l29.9-30.6c4.3-4.4 11.3-4.5 15.5-.2L380.9 248c2.2 2.2 3.2 5.2 3 8.1.1 3-.9 5.9-3 8.1L176.7 476.8c-4.2 4.3-11.2 4.2-15.5-.2L131.3 446c-4.3-4.4-4.4-11.5-.2-15.8L298.3 256z"></path></svg></label><label class="numb2" for="slider_2"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M298.3 256L131.1 81.9c-4.2-4.3-4.1-11.4.2-15.8l29.9-30.6c4.3-4.4 11.3-4.5 15.5-.2L380.9 248c2.2 2.2 3.2 5.2 3 8.1.1 3-.9 5.9-3 8.1L176.7 476.8c-4.2 4.3-11.2 4.2-15.5-.2L131.3 446c-4.3-4.4-4.4-11.5-.2-15.8L298.3 256z"></path></svg></label><label class="numb3" for="slider_3"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M298.3 256L131.1 81.9c-4.2-4.3-4.1-11.4.2-15.8l29.9-30.6c4.3-4.4 11.3-4.5 15.5-.2L380.9 248c2.2 2.2 3.2 5.2 3 8.1.1 3-.9 5.9-3 8.1L176.7 476.8c-4.2 4.3-11.2 4.2-15.5-.2L131.3 446c-4.3-4.4-4.4-11.5-.2-15.8L298.3 256z"></path></svg></label></div><div class="control previous"><label class="numb1" for="slider_1"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M213.7 256L380.9 81.9c4.2-4.3 4.1-11.4-.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-.2L131.1 247.9c-2.2 2.2-3.2 5.2-3 8.1-.1 3 .9 5.9 3 8.1l204.2 212.7c4.2 4.3 11.2 4.2 15.5-.2l29.9-30.6c4.3-4.4 4.4-11.5.2-15.8L213.7 256z"></path></svg></label><label class="numb2" for="slider_2"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M213.7 256L380.9...

CSS

@keyframes move-slider {
  0% {
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }
  10% {
    -moz-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }
  25% {
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  35% {
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  50% {
    -moz-transform: translate3d(-200%, 0, 0);
    -ms-transform: translate3d(-200%, 0, 0);
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }
  60% {
    -moz-transform: translate3d(-200%, 0, 0);
    -ms-transform: translate3d(-200%, 0, 0);
    -webkit-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);
  }
  75% {
    -moz-transform: translate3d(-300%, 0, 0);
    -ms-transform: translate3d(-300%, 0, 0);
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
  85% {
    -moz-transform: translate3d(-300%, 0, 0);
    -ms-transform: translate3d(-300%, 0, 0);
    -webkit-transform: translate3d(-300%, 0, 0);
    transform: translate3d(-300%, 0, 0);
  }
}
@keyframes slide_animation {
    0% {
        transform: translateX(0%)
    }

    10%,20% {
        transform: translateX(-100%)
    }
}

@-webkit-keyframes slide_animation {
    0% {
        left: 0
    }

    10% {
        left: 100px
    }

    20%,30%,40%,50% {
        left: 500px
    }

    60%,70%,80%,90%,to {
        left: 1000px
    }
}

.photo_slider,.slider {
    position: absolute;
    width: 100%
}

.photo_slider {
    display:...