JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Ma page web</title>
		<style>
			body {
				padding: 50px;
			}
			#conteneur1 {
				/* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
				grid-template-rows: repeat(3, auto);
				gap: 10px;
				align-items: stretch;  /* Remplace justify-item ? */
				/* Mise en forme */
				width: 920px;
        height: auto;
				padding: 10px;
				border: 1px solid #000;
        border-radius: 3px;
        background-color: lightblue;
			}
      
      #conteneur2 {
        /* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
				grid-template-rows: repeat(3, auto);
				gap: 10px;
				align-items: start;  /* Remplace justify-item ? */
				/* Mise en forme */
				width: 920px;
        height: auto;
				padding: 10px;
				border: 1px solid #000;
        border-radius: 3px;
        background-color: lightblue;
      }
      
       #conteneur3 {
        /* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
				grid-template-rows: repeat(3, auto);
				gap: 10px;
				align-items: end;  /* Remplace justify-item ? */
				/* Mise en forme */
				width: 920px;
        height: auto;
				padding: 10px;
				border: 1px solid #000;
        border-radius: 3px;
        background-color: lightblue;
      }
      
      #conteneur4 {
        /* Grille de mise en page */
				display: grid;
				grid-template-columns: repeat(3,300px);
				grid-template-rows: repeat(3, auto);
				gap: 10px;
				align-items: center;  /* Remplace justify-item ? */
				/* Mise en forme */
				width: 920px;
        height: auto;
				padding: 10px;
				border: 1px solid #000;
        border-radius: 3px;
        background-color: lightblue;
      }
      
			p {
  			/*  word-wrap: break-word; /* Passage à la ligne */
        margin: 0;
        padding:...