JSFiddle - React, Tailwind, and code Playground

HTML

<div>Je suis le méchant qui pousse tous les gentils !</div><div>Je suis gentil et je n'aime pas être poussé :(</div>

CSS

html, body {margin: 0;height: 100%;}

body {
  overflow: hidden;
  white-space: nowrap;
}

body:hover div:first-child {
  margin-left: 0;
}

div {
  white-space: normal;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  text-align: center;
  font: 1.2em/4em sans-serif;
  color: #eee;
}

div:nth-child(1) {
  margin-left: -100%;
  background: #09f;
  transition: .5s ease;
}


div:nth-child(2) {
  background: #007acc;
}