JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">


<head>
	<meta charset="utf-8"/>
	<title>Vol_hélico.html</title>
	<link rel="stylesheet" type="text/css" href="helico.css" /> <!--href"" vide pour essai. Nom de fichier CSS helico.css-->
	
</head>


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

<h1>VOL EN HELICOPTERE RADIOCOMMANDE</h1>
<p style="text-align: center;"><!--Centre l'image horizontalement-->
		<img src="file://C:\Users\Perso\Pictures\helico1.jpg"alt"Photo d'un hélicoptère"/><!--Affiche l'image-->
</p>
<h3>ALLER DIRECTEMENT A LA PARTIE TRAITANT DE :</h3>
<div>
	<ul class="multi-colonnes">
		<li><a href="#import">Important</a></li> <!--Lien hypertexte-->
		<li><a href="#conseils">Conseils lors de l'achat d'un modèle</a></li>
		<li><a href="#pilotage">Concernant l'apprentissage du pilotage</a></li>
		<li><a href="#cyclique">Le plateau cyclique</a></li>
		<li><a href="#rotor principal">Le rotor principal</a></li>
		<li><a href="#anticouple">Le rotor anticouple</a></li>
		<li><a href="#radio">La radiocommande</a></li>
		<li><a href="#prop">La propulsion</a></li>
		<li><a href="#servos">Les servos</a></li>
		<li><a href="#gyro">Le gyroscope</a></li>
		<li><a href="#photos montage">Quelques photos de montage</a></li>
	</ul>
</div>

<hr>			
		
<h3>RECOMMANDATIONS AUX DEBUTANTS :</h3>
<ul>
	<li>Faire èvoluer un modèle radiocommandé n'est pas sans danger. L'hélicoptère peut provoquer des blessures, voir des amputations graves, selon la taille des rotors.</li>
	<li>Respecter les distances de sécurité, concernant le public, ou des visiteurs éventuels.</li>
	<li>Maintenir le modèle en bon état, mécanique et électronique.</li>
	<li>Choisir un terrain bien dégagé, avec une aire de décollage/atterrissage adéquate.</li>
	<li>Avant le vol, toujours vérifier l'état du modèle, de la charge des accus, y compris ceux de la radio.</li>
	<li>Avant de décoller, tester toutes les commandes de vol; au besoin, effectuer un test de portée de la...

CSS

h1 {
	font-size: 250%;
  
  color: #1a58d8;
  text-align: center;
  
  text-shadow: 2px 2px grey;
	}
	
	h3 {
	  color: black;
    padding-left: 10px; /* Décale les titres de paragraphe à droite */
	}
		
	p {
	  font-size: 130%;
    padding-left: 10px; /* Paragraphe décalé à droite */
	}

		
	li {
	  font-size: 130%;
    }
	
	.multi-colonnes {
		padding-left: 15px;
		column-count: 2;/* Affiche la liste sur 2 colonnes */
		column-gap: 20px; /* Espace entre les colonnes ? */
		column-fill: auto;
		list-style-position: inside;
		}
		
		ul {
			margin: 10px;
			display: inline-block;
			border: blue double;
			border-radius: 10px;
			box-shadow: 4px 4px 4px blue;
			}
		
	.image{
		float: left;
		margin: 0 15px 15px 0 /* Place le texte à droite de l'image */
		}