JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tile-container">
  <div class="tile tile-1-0">
    <div class="tile-inner">1</div>
  </div>
  <div class="tile tile-1-1 selected">
    <div class="tile-inner">2</div>
  </div>
  <div class="tile tile-1-2">
    <div class="tile-inner">3</div>
  </div>
</div>

CSS

.tile {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
}

.tile-inner {
  text-align: center;
  z-index: 10;
}

.tile-1-0 {
  transform: translate(0px, 0px);
}

.tile-1-1 {
  transform: translate(55px, 0px);
}

.tile-1-2 {
  transform: translate(110px, 0px);
}

.selected .tile-inner {
  background-color: blue;
  animation: back-and-forth 0.5s infinite alternate;
  z-index: 99;
}

@keyframes back-and-forth {
  from {
    transform: translateX(-25px);
  }
  to {
    transform: translateX(25px);
  }
}