JSFiddle - React, Tailwind, and code Playground

by jmpp77

HTML

<div id="parent">
  <div class="enfant">Pomme</div>
  <div class="enfant">Poire</div>
  <div class="enfant">Banane</div>
  <div class="enfant">Fraise</div>
  <div class="enfant">Mangue</div>
</div>

CSS

#parent {
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: all 1s;
}

#parent > * {
  flex: 0 0 auto;
  transition: all 1s;
  order: 0
}

#parent > *:hover {
  flex: 1;
}

#parent > :nth-child(1) {
  order: 1;
}







/* Mise en forme pour la démo */
#parent { margin-top: 1.2rem; position: relative; border: medium solid black; }
#parent::before { position: absolute; top: -22px; font-family: 'Open Sans', sans-serif; content: "#parent" }
.enfant { padding: 0.5rem 1rem; border-radius: 2px; font-weight: bold; font-family: 'Open Sans', sans-serif; color: transparent; text-shadow: 0 0 3px #000; }
.enfant:nth-child(1) { background-color: lime; color: lime; }
.enfant:nth-child(2) { background-color: olive; color: olive; }
.enfant:nth-child(3) { background-color: yellow; color: yellow; }
.enfant:nth-child(4) { background-color: red; color: red; }
.enfant:nth-child(5) { background-color: orange; color: orange; }