JSFiddle - React, Tailwind, and code Playground

by Andreas Burg

HTML

<ul>
  <li class="active">
    <strong>Deutsch</strong>
  </li>
  <li>
    <a href="#">English</a>
  </li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 6rem;
  height: 30px;
  overflow: hidden;
  position: relative;
}
li {
  position: absolute;
  width: 100%; /* width of parent */
  left: 100%;  /* hide LIs */
  transition: all .2s ease 0s;
}
li.active {
  left: 0; /* show active */
}
ul:hover li {
  left: 0; /* push LIs to left on hover */
}
ul:hover li.active {
  left: -100%; /* hide active LI to left on hover */
}
a, strong {
  display: block;
  background: cornflowerblue;
  color: white;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
strong {
  background: tomato;
  font-weight: normal;
}