JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div class="slider">

    <div class="sli sli3"></div>
    <div class="sli sli4"></div>
    <div class="sli sli5"></div>
  </div>
  <div class="slider slider1">

    <div class="sli sli3"></div>
    <div class="sli sli4"></div>
    <div class="sli sli5"></div>
  </div>
</body>
</html>

CSS

html,
body {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;


}
.smile-container {
  margin: auto;
  width: 220px;
  height: 220px;
  margin-top: 50px;
  animation-name:  transition;
  animation-duration:  2s;
  animation-iteration-count:  infinite;
  animation-direction:  normal;
  animation-timing-function: linear;
  animation-delay: 3s;
}


.smile {
  position: relative;
  margin: auto;

  width: 200px;
  height: 200px;
  /*border: 10px solid yellow;*/
  background: yellow;
  border-radius: 50%;
  animation-name:  rotate;
  animation-duration:  1s;
  animation-iteration-count:  infinite;
  animation-direction:  normal;
  animation-timing-function: linear;
  animation-delay: 3s;
}
.smile::after {
  content: '';
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-bottom: 5px solid red;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 20%;
  animation-name: smile;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
  animation-direction: alternate;

}

.smile::before {
  display: block;
  content: '';
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: yellow;
  position: absolute;
  top: 50px;
  left: 20px;
  box-shadow: 30px 0 0 -10px black,
  			  30px 0px  white,
  			  100px 0 0 -10px black,
  			  100px 0px  white;
  animation-name: eye;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 3;
  animation-direction: alternate;
}

@keyframes smile {
	from { 
		border-radius: 0%;
	}
	to {
		border-radius: 50%;
	}
}
@keyframes eye {
	from {
		 box-shadow: 30px 0 0 -10px black,
  			  30px 0px  white,
  			  100px 0 0 -10px black,
  			  100px 0px  white;
	}
	to {
		 box-shadow: 30px 0 0 -5px black,
  			  30px 0px  red,
  			  100px 0 0 -5px black,
  			  100px 0px  red;
	}
}
@keyframes rotate {
	from {
		transform:...