JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="fr">

<head>
	<meta charset="utf-8">
	<title>Vol-hélico-pages</title>
	<link rel="stylesheet" type="text/css" href="helico-loc.css"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" media="screen and (max-width: 1366px)" href="helico-loc.css"  type="text/css"/> -->
</head>

<body class="degrade-espace-auto">
<h1 class="h1">DEBUTER EN HELICOPTERE RADIOCOMMANDE</h1>

<div class="div1">
	<img src="Images/Helico1B.jpg" alt="Helico1"> <!-- Affiche l'image et la centre (en css .div1) -->
	<!-- <figcaption>GAUI X5</figcaption> <!-- Affiche l'annotation sous la photo -->
</div>

<h2 class="h2">ALLER DIRECTEMENT A LA PARTIE TRAITANT DE :</h2>

<div class="photoG">
	<img src="Images/alo.jpg" alt="Petite Alouette">
	<figcaption>Alouette II RC</figcaption>
</div>

<div class="photoD">
	<img src="Images/rad.jpg" alt="Radiocommande"> 
	<figcaption>Radiocommande pupitre</figcaption>
</div>

<!-- <span style="position: absolute; top:610px; left:80px; width: 240px; height: 180px">
	<img src="images/alo.jpg" class="photo" alt="Petite Alouette">
</span>

<span style="position: absolute; top:610px; left:1600px; width: 263px; height: 180px">
	<img src="images/rad.jpg" class="photo" alt="Radiocommande">
</span> -->

<div id="liste"> <!-- pour centrer la liste -->
	<ul class="multi-colonnes">
		<li class="mquer"><a href="recommandations.html">Recommandations aux débutants</a></li>
		<li class="mquer"><a href="choix.html">Choix du modèle</a></li>
		<li class="mquer"><a href="conseils-achat.html">Conseils lors de l'achat d'un modèle</a></li>
		<li class="mquer"><a href="pilotage.html">Concernant l'apprentissage du pilotage</a></li>
		<li class="mquer"><a href="cyclique.html">Le plateau cyclique</a></li>
		<li class="mquer"><a href="rotor-principal.html">Le rotor principal</a></li>
		<li class="mquer"><a href="pal.html">Les pales</a></li>
		<li class="mquer"><a href="tete-flybar.html">Tête...

CSS

@media screen and (max-width: 1366px) {
  .h1 {
	width: 70%;
	margin: 0;
   	font-size: 80%;
    text-shadow: 2px 2px grey;
    border-radius: 5px;
	}
	
   .image {
	   width: 400px; /* 450px */
   }
	
   
  .mquer {
	   font-size: 85%;
   }
   #liste {
	   text-align: center; /* Centre la liste menu accueil */
   }
   
   .h2 {
	   font-size: 90%;
   }
} 




/* @media screen and (max-width: 1366px) { 
  .mquer {
   	font-size: 90%;
	}
	#liste {
		text-align: center; /* Centre la liste à 1366 px PC portable 
	}
	} */

/* @media screen and (max-width: 1366px) { 
.h2 { font-size: 90%;}
	} */

.degrade-espace-auto {
	background: linear-gradient(red, yellow, red);
	height: 800px;
	}
	
	
/* Centrer image hélico accueil */	
.div1 {
	display: flex;
	justify-content: center;
	}
	
.div2 {
	margin: 10px;
	
}
	
.flotte {
	float: left;
	margin: 10px;
}

h1 {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
	/* margin-left: 450px; /* Marge gauche de la boîte */
	font-family: "Comic Sans MS", Arial, sans-serif;
	font-size: 160%;
	text-align: center; /* Titre centré dans la boîte */
	padding: 20px;
	border-radius: 10px; /* Coins arrondis */
	border: blue double; /* Bord bleu double */
	background-color: yellow; /* Couleur de la boite */
	color: #ff9900; /* Couleur du texte */
	text-shadow: 3px 3px grey; /* Ajoute une ombre */
	}
	
h3  {
	font-family: "Comic Sans MS", Arial, sans-serif;
	color: #ff9900; 
	padding-left: 10px; /* Décale les titres de paragraphe à droite */
	}
	
h2 {
	font-family: "Comic Sans MS", Arial, sans serif;
	color: red;
	text-align: center;
	}
		
p {
	color: #6f1ea5;
	font-family: "Comic Sans MS", Arial, sans-serif;
	font-size: 120%; 
	padding-left: 10px; /* Paragraphe décalé à droite */
	border: blue double;
	border-radius: 15px;
	}
	
/* Petite photo Alouette II accueil */	
.photoG {
	float: left;
	margin-left: 60px; /* marge gauche */
	margin-top: 20px;
	}
	
/* Petite photo radio accueil */	
.photoD {
	float: right;
	margin-right: 60px; /* marge...