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 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 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: column;
  flex-wrap: wrap-reverse; */
  
  flex-flow: column wrap-reverse;
}







/* 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; }