JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<div>
  <span id="parcifal">Parcifal</span>
  <span id="programmatuur">Programmatuur</span>
</div>

CSS

div {
  width: 300px;
  overflow: hidden;
  transition: transform 500ms;
  cursor: default;
}

div:hover {
  transform: rotateY(180deg);
}

span {
  display: inline-block;
  width: 50%;
  font-family: sans-serif;
}

#parcifal {
  float: right;
}

#programmatuur {
  float: left;
  transform: scaleX(-1);
}