JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rouge">Rouge</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</P>
			</article>
			<article class="couleur_de_fond">
				<h1 class="bleu">Bleu</h1>
				<p>
					p
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="jaune">Or</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="vert">Vert</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="noir">Noir</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="orange">Orange</h1>
				<p>
					p
				</P>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rose">Rose</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="magenta">Magenta</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="marron">Marron</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="citron_vert">Citron vert</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="pourpre">Pourpre</h1>
				<p>
					p<br>p<br>
				</p>
			</article>
			<article class="couleur_de_fond">
				<h1 class="bleu_canard">Bleu canard</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>p<br>p<br>p<br>
				</p>
			</article>
		</div>
		
		<div class="container2">
			<article class="couleur_de_fond">
				<h1 class="rouge">Rouge</h1>
				<p>
					p<br>p<br>p<br>p<br>p<br>
				</P>
			</article>
			<article class="couleur_de_fond">
				<h1...

CSS

*{
	margin: 0;
	padding: 0;
}

.container{
  display: flex;
  gap: 10px;
}

.container2{
  flex: 1;
}

.couleur_de_fond{
	background-color: salmon;
  margin-bottom: 10px;
}

h1{
	background-color: red;
	text-align: center;
	padding: 5px;
	color: white;
}

p{
	padding: 20px;
	color: white;
}

/* ------------------------ */
/* ----- COULEURS ----- */
/* ------------------------ */

.rouge{background-color: red;}
.bleu{background-color: blue;}
.jaune{background-color: gold;}
.vert{background-color: green;}
.noir{background-color: black;}
.orange{background-color: orange;}
.rose{background-color: pink;}
.magenta{background-color: magenta;}
.marron{background-color: brown;}
.citron_vert{background-color: lime;}
.pourpre{background-color: purple;}
.bleu_canard{background-color: teal;}