JSFiddle - React, Tailwind, and code Playground

by samc

HTML

<div class="slide-container">
  <div class="slide" id="side-1">
    <h1>Slide 1</h1>
  </div>
  
  <div class="slide" id="side-2">
    <h1>Slide 2</h1>
  </div>
  
  <div class="slide" id="side-3">
    <h1>Slide 3</h1>
  </div>
  
  <div class="slide" id="side-4">
    <h1>Slide 4</h1>
  </div>
  
  <div class="slide" id="side-5">
    <h1>Slide 5</h1>
  </div>
</div>

CSS

body, html {
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  font: 100%/1.5 sans-serif;
}

.slide-container {
  height: 100%;
  animation: slide 20s ease infinite;
}

@keyframes slide {
  0%, 15% {transform: translateY(0%)}
  20%, 35% {transform: translateY(-100%)}
  40%, 55% {transform: translateY(-200%)}
  60%, 75% {transform: translateY(-300%)}
  80%, 95% {transform: translateY(-400%)}
}

.slide {
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #6d5fbc;
  color: #fff;
  height: 100%;
  padding: 1em;
  box-sizing: border-box;
  overflow: auto;
}
.slide:nth-child(even) {
  background: #5fbc91;
}

.slide h1:first-of-type {
  margin-top: 0;
}