JSFiddle - React, Tailwind, and code Playground

by Kayrat

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
    <style>
    *{
      margin:0;
      padding:0;
      box-sizing: border-box;
    }

   .full{
     width:100%;
     height:100px;
     background-color:lightgreen;
 
   }
   .banner {
     background-color:red;
     width:1208px;
     height:100px;
     transition: all 0.3s ease-in-out;
    position:absolute;
    transform: translate(-50%,0);
     top:0%;
     left:50%;
     overflow:hidden;
     border: 1px solid red;
   }
   
.wrapper{
    width: 100%;
    height:auto;
    display: flex;
    animation: slide 16s infinite;
    
   
}


@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

/*
@keyframes slide{
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);
    }
    30%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(-100%);
    }
    55%{
        transform: translateX(-200%);
    }
    75%{
        transform: translateX(-200%);
    }
    80%{
        transform: translateX(-300%);
    }
    100%{
        transform: translateX(-300%);
    }
}

*/
img{
    width: 100%;
}

  </style>
  
  </head>
<body>

<div class='full'>
  <div class="banner">
  <div class="wrapper"> 
        <img src="https://live.staticflickr.com/65534/48930172673_b8f729aa54_z.jpg" alt="1">
        <img src="https://wallpaperscave.ru/images/original/18/05-12/abstract-artistic-50608.jpg" alt="2">
        <img src="https://i.artfile.ru/2000x1330_1363908_[www.ArtFile.ru].jpg" alt="3">
        <img...