JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="fr">
<head> 
	<meta charset="UTF-8"/>
	<link rel="stylesheet" href="../css/styles.css">
	<link rel="stylesheet" href="print.css" type="text/css" media="print">

	<title> Game of Thrones</title>
	<img src="../images/got.jpg" height="auto" width="100%">

</head>
<body>


	<ul>
		<li><a href="../index.html">Accueil</a></li>
		<li><a href="../carte_du_monde/carte.html">Carte du monde</a></li>
		<li><a href="../theories/theories.html">Théories</a></li>
		<li><a href="../references/references.html">Références</a></li>
	</ul>
	<p></p>
		<div class="citation">"- Valar morghulis."</div>
		<div class="citation">"- Oui, tous les hommes doivent mourir. Mais nous ne sommes pas des hommes."</div>
</div>
	<p></p>
<h1>Daenerys Targaryen</h1>

<div class="bloc2">
	<img class="image_perso" src="../images/daenerys_targaryen.jpg">
	<p><b>Nom :</b> Daenerys Targaryen</p>
	<p><b>Maison :</b><a href="../maisons/maison_targaryen.html"> Targaryen</p></a>
	<p><b>Parents :</b> Aery II et Rhaella Targaryen</p>
	<p><b>Autre(s) noms(s) :</b></p>
	<p>Daenerys de typhon de la Maison Targaryen</p>
	<p>Reine de Meereen</p>
	<p>Reine des Andals, de Rhoynar et des Premiers Hommes</p>
	<p>Suzeraine des Sept Couronnes et Protectrice du Royaume</p> 
	<p>Khaleesi de la Grande Mer Herbeuse</p>
	<p>Mère des Dragons</p> 
	<p>L'Imbrûlée</p>
	<p>Mhysa</p>




</div>

<h2>Histoire</h2>
<p>Daenerys est la fille du Roi Fou Aerys II Targaryen et de la reine Rhaella Targaryen ainsi que la jeune sœur de Rhaegar et Viserys Targaryen. Son père, atteint de folie, fut dépossédé de son trône par Robert Baratheon, dit l'Usurpateur. À la suite de ce coup d'État, la princesse Daenerys et son frère aîné, le prince Viserys, ont dû fuir et vivre en exil dans les Cités libres à Essos, le continent à l'est de Westeros, au-delà du Détroit.</p>
<P> Elle est officiellement la dernière représentante de la Maison Targaryen, les origines de Jon Snow n'étant connues que par Bran Stark et Samwell...

CSS

/* Tout ce qui va concerner la barre de navigation */
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
    overflow: hidden;
    background-color: #333;
    position: sticky;
    top: 0;
    border: 2px black groove;
}

li {
    float: left;
}

li a {

    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none; /* espace les éléments */
    font: normal 100 0.9em verdana,arial, sans-serif;
}

li a:hover {
    background-color: #111;
}

/* Concerne la mise en page de l'arrière-plan */
body{
	display: table;
	background-color: #EBE4E4;
	background-attachment: scroll;
	background-position: 100
 	width:300px;
 	padding:50px;
 	margin: 5px 15px;
 	position: relative;

}

/* Concerne la mise en page des polices de base */
h1{
	background-color: #333;
	color: white;
	font: normal 100 1em verdana, arial, sans-serif;
}


h2{
	color: #333;
	border-bottom: 4px double #333;
	font: normal 100 1em arial black,arial, sans-serif;
	width: 890px;
}


p{
	font:normal 100 0.7em verdana,arial, sans-serif;
	text-align: left;

}

/* Mise en page de la liste de définition */
dl {
	text-align: left;
	font: normal 100 0.9em arial,verdana, sans-serif;
}

/* Mise en page pour les liens */


/* Couleur lors du survol du lien*/
a {
	color: #808080;
}

a:hover{
	color: #800000;
}

/* Mise en page tableau */

table {
	color: #333;
	font:normal 100 1em verdana,arial, sans-serif;
	border: medium solid #333;
	width: 70%;
	text-align: center;
	border-collapse: collapse; /* bordures de tour de tableau et de cellules soient confondues */
 	margin: 1px 25px;
}

td{
	color: #333;
	font:normal 100 0.8em verdana,arial, sans-serif;
	border: thin outset #C0C0C0;
	width: 50%;
}

th{
	color: white;
	font:normal 100 0.9em verdana,arial, sans-serif;
	border: thin outset black;
	width: 50%;
	background-color: #333;
}

caption {
	font:normal 100 1em verdana,arial, sans-serif;
}

/* Pied-de-page*/
footer{
	background-color: #333;
	border: 2px black...