JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<p>V1 règles sur les node</p>
<div class="tree-node">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node" style="--bg-node:#80bb60"></div>
  <div class="node"></div>
  <div class="node" style="--flex-default:44%"></div>
  <div class="node"></div>
  <div class="node" style="--bg-node:#f0d56a"></div>
</div>
<div>

<p>V2 Règles sur le parent</p>
</div>
<div class="tree-node" style="--flex-default:30%; --bg-node: #3860b6;">
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
  <div class="node"></div>
</div>

SCSS

:root {
	--bg-node: #ff0050;
  --flex-default: 18%;
}

.tree-node {
  display: flex;
  flex-flow: row wrap;
}
.node {
  height: 8rem;
  border: 1px solid #ddd;
  margin: 1rem;
  max-width: 25rem;
  background: var(--bg-node);
  flex-basis: var(--flex-default);
}