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.css"> 
	
</head>

<body style="background-color:#b8f6f7;"> <!-- Couleur de fond de la page en bleu -->

<h1>DEBUTER EN HELICOPTERE RADIOCOMMANDE</h1>

<div>
	<img src="file:C://Users/Perso/Pictures/photosite/helico1.jpg" alt="Helico"> <!-- Affiche l'image et la centre (en css) -->
</div>

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

<!-- <span style="position: absolute; top: 720px; left: 80px;">
	<img src="file:C://Users/Perso/Pictures/photosite/alo.jpg" class="photo" alt="Petite Alouette">
</span>

<span style="position: absolute; top: 720px; left: 1600px;">
	<img src="file:C://Users/Perso/Pictures/photosite/rad.jpg" class="photo" alt="Radiocommande">
</span> -->

<div class="photoD">
	<img src="file://C:/Users/Perso/Pictures/photosite/alo.jpg" alt="Petite Alouette">
</div>


<div class="photoG">
	<img src="file://C:/Users/Perso/Pictures/photosite/rad.jpg" alt="Radiocommande">
</div>

<div>
	<ul class="multi-colonnes">
		<li><a href="recommandations.html">Recommandations aux débutants</a></li>
		<li><a href="choix.html">Choix du modéle</a></li>
		<li><a href="conseils-achat.html">Conseils lors de l'achat d'un modèle</a></li>
		<li><a href="pilotage.html">Concernant l'apprentissage du pilotage</a></li>
		<li><a href="cyclique.html">Le plateau cyclique</a></li>
		<li><a href="rotor-principal.html">Le rotor principal</a></li>
		<li><a href="pal.html">Les pales</a></li>
		<li><a href="tete-flybar.html">Tête Flybarless</a></li>
		<li><a href="anticouple.html">Le rotor anticouple</a></li>
		<li><a href="radio.html">La radiocommande</a></li>
		<li><a href="prop.html">La propulsion</a></li>
		<li><a href="servos.html">Les servos</a></li>
		<li><a href="gyro.html">Le gyroscope</a></li>
		<li><a href="conseils-mont.html">Conseils de montage</a></li>
	</ul>
</div>


<!-- <img...

CSS

h1 {
		font-family: "Comic Sans MS", Arial, sans-serif;
		font-size: 250%;
		border-radius: 10px; /* Coins arrondis */
		border: blue double; /* Bord bleu double */
		background-color: yellow; /* Couleur de la boite */
		color: #ff9900; /* Couleur du texte */
		text-align: center; /* Titre centré dans la page */
		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: #ff9900;
		text-align: center;
	   }
		
	p {
		color: #6f1ea5;
		font-family: "Comic Sans MS", Arial, sans-serif;
		font-size: 120%; 
		padding-left: 10px; /* Paragraphe décalé à droite */
	
	/* display: inline-block; */
		border: blue double;
		border-radius: 15px;
	}

	li {
		font-size: 130%;
		list-style-type: none; /* supprime les puces */
		
	}
	
		
	.multi-colonnes {
		padding-left: 15px;
		column-count: 3; /* Affiche la liste sur 3 colonnes */
		column-fill: balance;
		
		}
		
	.photoG {
		float: left;
	}
	
	.photoD {
		float: right;
	}	
		
	ul {
		color: #6f1ea5;
		font-family: "Comic Sans MS", Arial, sans-serif;
		margin: 10px;
		display: inline-block;
		border: blue double; /* Double bordure bleue */
		border-radius: 10px; /* Coins arrondis */
		box-shadow: 4px 4px 4px blue; /* Affiche des ombres */
		}
		
	.image {
		float: left;
		margin: 0 15px 15px 0; 
		}
		
	a.bouton {
		text-decoration: none;
		float: left;
		padding: 10px 30px;
		background-color: blue; 
		color: white;
		border: 2px solid red;
		border-style: inset;
		border-radius: 6px; /* Angles arrondis */
		}

	a.bouton:hover {
		background-color: yellow; /* Couleur du bouton en survol */
		color: red; /* Couleur du texte en survol */
	}
	
	div {
		text-align: center;
	}