JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base">
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child2"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
</div>

CSS

.container, .base {
    width: 500px;
    height: 400px;
}

.base {
    border: solid 1px black;
}
.container {
    -webkit-transition: 1s all linear;
}
.child, .child2 {
    width: 120px;
    height: 80px;
    display: inline-block;
    margin: 10px;
}
.child {
    -webkit-transition-duration: 1s;
    -webkit-transition-property: height, width, margin;
    -webkit-transition-timing-function: linear;
    background-color: lightblue;
}
.child2 {
    -webkit-transition: 1s all linear;
    background-color: lightgreen;
}
.base:hover .container {
    width: 20px;
}
.base:hover .child {
    width: 5px;
    height: 0px;
    margin: 0px;
    background-color: silver;
}
.base:hover .child2 {
    margin-right: -120px;
}