JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang=fr>

<head>
  <title>Mon document en html5</title>
  <meta charset="UTH8"/>
</head>

<body>
<header>
    <h1>
     MA PAGE WEB EN HTML5
    </h1>

 <nav>
    <ul>
      <li><a href="#">Lien 1</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
 </nav>
 <article>
   <h2>
     LUNDI.<time> 22/12/2022</time>
   </h2>
   <P>
     L'affichage du paragraphe s'adapte à la résolution écran, en relation avec le contenu(ascenseur horizontal, et vertical).<br>
     Composé de deux à cinq pales, sa première fonction est d'assurer la <i class="tooltip" data-tooltip="L'inclinaison de la pale crée une pression à l'intrados et une dépression à l'extrados, cela crée une force de sustentation"><u>portance</u></i> 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 <mark>collectif</mark> qui le permet.<br>
     Sa deuxième fonction est d'assurer les translations avant, arrière, droite, gauche. C'est le <mark>cyclique</mark> 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) est ainsi dirigé vers l'avant, l'arrière, la droite, la gauche.<br>
	Combiné avec le rotor anticouple(rotor de queue) il permet les virages.<br>
   </P>
 </article>
 <article>
   <h2>
     MARDI. <time> 23/12/2022</time>
   </h2>
   <p>
     L'affichage du paragraphe s'adapte à la résolution écran, en relation avec le contenu(ascenseur horizontal, et vertical).<br>
	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...

CSS

header, nav, article, footer  {
  width: 800px;
  margin: 0  auto;
}

header {
  border: 1px solid #000;
  background-color: silver;
}

h1  {
    text-align: center;
    color: red;
    }

nav, article  {
  border-bottom: 1px solid #333;
}

nav, ul,  {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

a {
  text-decoration: none;
  font-weight: bold;
  color: green;
}

h2 {
  color: red;
  font-size: 1.2em;
  }
  
 p {
   margin-left: 20px; /* Décale le paragraphe à droite */
   font-size: 1.2em;
 }
 
 footer {
   font-size: 1em;
   background-color: silver;
   color: red;   
 }
 
 .tooltip {
	font-style: normal;
	cursor: help;
	color: #2f1de4;
}

.tooltip::before {
	content: attr(data-tooltip);
	position: absolute;
	padding: 0.5em 1em;
	padding-left: calc(1em + 32px);
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
	background: #fff url('https://cdn0.iconfinder.com/data/icons/website-design-4/467/setting_icon-32.png') no-repeat 10px 50% / auto 60%;
	font-size: 0.8em;
	transition: 0.25s ease;
	opacity: 0;
	visibility: hidden;
	transform: translateY(50%);
}

.tooltip:hover::before {
	opacity: 1;
	visibility: visible;
	transform: translateY(calc(100% + 1rem));
}