JSFiddle - React, Tailwind, and code Playground

HTML

<div class="a">
  <div class="b">
    <div class="d"></div>
    <div class="d"></div>
    <div class="d"></div>
  </div>
  <div class="c"></div>
</div>

CSS

.a {
  overflow: hidden;
}
.b {
  transform: translate(-25%, 0);
  transition: transform 1s ease-out;
  white-space: nowrap;
}
.b:hover {
  transform: translate(0, 0);
}
.c {
  background:red;
  height: 200px;
}
.d {
  background:blue;
  display: inline-block;
  height: 100px;
  width: 50%;
}