JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<div id="slideshow">
    <ul>
      <li id="first" class="first-animation">
        <a href="http://www.quintadolago.com/en/property/san-lorenzo-north"> <img src="http://www.quintadolago.com/golf-holidays/slnbanner/1.jpg" alt="" width="210px" height="175px"/> </a>
      </li>

      <li id="second" class="second-animation">
        <a href="http://www.quintadolago.com/en/property/san-lorenzo-north"> <img src="http://www.quintadolago.com/golf-holidays/slnbanner/2.jpg" alt="" width="210px" height="175px"/> </a>
      </li>
      
      <li id="third" class="third-animation">
        <a href="http://www.quintadolago.com/en/property/san-lorenzo-north"> <img src="http://www.quintadolago.com/golf-holidays/slnbanner/3.jpg" alt="" width="210px" height="175px"/> </a>
      </li>

      <li id="fourth" class="fourth-animation">
        <a href="http://www.quintadolago.com/en/property/san-lorenzo-north"> <img src="http://www.quintadolago.com/golf-holidays/slnbanner/4.jpg" alt="" width="210px" height="175px"/> </a>
      </li>

    
    </ul>
</div>


<style>
    #slideshow {
  margin: 40px auto 40px;
  position: relative;
  height: 175px;
  width: 210px;
  overflow: visible;
}
#slideshow ul{
list-style:none;
    margin:0;
    padding:0;
}
#slideshow li.first-animation {
  position: absolute;
  top: 0;
  /*name, duration, timing function, iteration count*/
  -moz-animation: cycle 20s ease-in-out infinite;
  -webkit-animation: cycle 20s ease-in-out infinite;
  -o-animation: cycle 20s ease-in-out infinite;
  -ms-animation: cycle 20s ease-in-out infinite;
  -khtml-animation: cycle 20s ease-in-out infinite;
  animation: cycle 20s ease-in-out infinite;
}
#slideshow li.second-animation {
  position: absolute;
  top: 0;
  -moz-animation: cycletwo 20s ease-in-out infinite;
  -webkit-animation: cycletwo 20s ease-in-out infinite;
  -o-animation: cycletwo 20s ease-in-out infinite;
  -ms-animation: cycletwo 20s ease-in-out infinite;
  -khtml-animation: cycletwo 20s ease-in-out...