JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang=fr>

<head>
  <title>Ancre page 93 HTML5 et CSS3</title>
  <meta charset="UTH8"/>

</head>

<body style="background-color: antiquewhite;"> 

<div id="special">
<h1>ANCRE :</h1>
<a href="#introduction">INTRODUCTION</a> |
<a href="#realisation">REALISATION</a> |
<a href="#resultats">RESULTATS</a> |
<a href="#conclusion">CONCLUSION</a>


	<p class="p1">Le rotor anticouple contre le couple engendré par la rotation du rotor principal; sans lui, la cellule tournerait dans le sens inverse du rotor principal.<br>
	Je le répéte, l'hélico ne pourrait pas voler.<br>
	Les virages ne seraient pas possibles, puisqu'il permet une rotation contrôlée de la cellule sur l'axe de lacet, pour amorcer un virage, en combinaison avec le latéral cyclique à droite ou à gauche.<br>
	Lorsque la manette de la dérive est au point milieu, le pas des pales est neutre, la cellule ne doit pas dévier de son axe au décollage, ce qui serait dangereux.<br>
	C'est donc un élément important qui doit être bien réglé. Il est contrôlé par un servo indépendant, relié à la tige de commande du rotor par une tringle, le long du tube de queue, sur certains modèles.<br>
	Là aussi, consulter la notice, pour le réglage.<br>
	Il est entraîné en rotation, soit par courroie crantée, soit par un arbre logé dans le tube de la queue de la cellule, entraîné par un couple cônique, relié d'une part à la roue dentée du rotor principal, et 
	d'autre part à l'axe du rotor anticouple.<br>
	<br>
	Les pales montées sur le moyeu, ne doivent pas être trop serrées dans leur logement, afin que la force centrifuge crèée par la vitesse de rotation puisse les aligner sans effort.<br>
	Deux pales non alignées engendreraient des vibrations de la cellule, néfastes pour les éléments tournants, pignons, roulements, et perturberaient le fonctionnement du gyro..<br>
	Il est donc important de le maintenir en parfait état de fonctionnement, au niveau des pales, des roulements, axe et moyeux non faussés, couples...

CSS

body {
	font-size: 1.3em;
	color: blue;
	}
	
#special > * {
	margin-top: 0;
	padding-bottom: 0;
	}
	
.p1 {
	padding-top: 10px;
	}
	
 h1 {
	font-size: 1.3em;
	margin: 0;
	} 
	
h3 {
	margin: 0;
	color: red;
	}

a {
  text-decoration: underline;
  color: #a00;
}
a:visited {
  color: green;
}
a:hover, a:focus, a:active {
  text-decoration: none;
  color: white;
  background: red;
}

a.bouton {
	text-decoration: none;
	float: left;
	padding: 5px 20px;
	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 */
	}