JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Page 52</title>
<style>
#conteneur-liste {
display: flex; /* Conteneur flexible */
flex-flow: row wrap; /* Axe principal horizontal, passage à la ligne autorisé */
justify-content: space-around;
align-items: flex-start;
width: auto; /* Effet d'affichage intéressant selon la résolution écran > affichage en ligne jusqu'à affichage en colonne */
height: auto;
border: 1px solid #000;
background-color: #ff9900;
padding: 10px;
}
#conteneur-liste li {
list-style: none;
border: 1px solid #000;
padding: 5px;
margin: 5px;
background-color: green;
color: yellow;
}
.h1 {
color: #ff9900;
text-align: center;
}
p {
color: blue;
width: auto;
}
</style>
</head>
<body>
<h1 class="h1">
** AXE PRINCIPAL HORIZONTAL **
</h1>
<ul id="conteneur-liste">
<li>UN.</li>
<li>DEUX.</li>
<li>TROIS.</li>
<li>QUATRE.</li>
<li>CINQ.</li>
<li>SIX.</li>
<li>SEPT.</li>
<li>HUIT.</li>
<li>NEUF.</li>
<li>DIX.</li>
</ul>
<p>
L'affichage du paragraphe s'adapte à la résolution écran, en relation avec le contenu(ascenseur horizontal, et vertical). Composé de deux à cinq pales, sa première fonction est d'assurer la portance du modèle, pour lui permettre de rester en vol, en augmentant le pas des pales de la même valeur, pour la montée.<br>
Ou en diminuant l'angle des pales de la même valeur, pour la descente. C'est le collectif qui le permet.<br>
Sa deuxième fonction est d'assurer les translations avant, arrière, droite, gauche. C'est le cyclique qui le permet.<br>
Pour cela, le rotor s'incline en avant, en arrière, à droite, à gauche, par l'intermédiaire du plateau oscillant, dont il est nécessaire de bien comprendre le fonctionnement.<br>
Le souffle engendré par le rotor(vortex)...