JSFiddle - React, Tailwind, and code Playground

HTML

<div id="TopBar"></div>     

<ul>
  <li><a href="cos'%C3%A8.html">Cos'&egrave;</a></li>
  <li><a href="chisiamo.html">Chi Siamo</a></li>
</ul>  

<al>
    <li class="lione"><a href="">News</a></li>
    <li class="lione"><a href="">Video</a></li>
    <li class="lione"><a href="">Gallery</a></li>
</al>

<h2>#THEDREAM</h2>   

<h3>Seguici Su:</h3>

<a href="https://www.facebook.com/pages/TheDream-IL-FILM/668675889932418?ref=aymt_homepage_panel">
  <img src="FB-logo.png" alt="FB Icon" style="position:fixed;bottom:22px;left:57px;width:29px;height:29px;border:0;z-index:1;">
</a>

<a href="https://www.youtube.com/channel/UC-0xXwA-gAqNPtcMwMnI-8Q">
  <img src="YouTube-logo.png" alt="YT Icon" style="position:fixed;bottom:10px;left:82px;width:55px;height:55px;border:0;z-index:1;">
</a>

<div>

<h5>Gianfranco Marascia</h5>

<p1><img src="Gianfranco.jpg" width="150" height="150" float="left" style="margin: 0 10px 0 0" align= "left">
Gianfranco Marascia nasce a Palermo nel 1995. Egli cresce a Baucina, un paese nella provincia di Palermo nell'entro terra siciliano. 
&Egrave; un ragazzo molto estroverso con la passione per i computer e, soprattutto, per il video/foto editing. Gi&agrave; da giovane inzia a girare 
video musicali con altri talenti compaesani come il percussionista 
<a href="https://www.youtube.com/channel/UCgJ9tGy35OlkEJourDpsXDg/feed" class="class1" target="_blank">Santi Orlando</a> 
e la cantante <a href="https://www.youtube.com/channel/UCSdE32rbojrpd_Qz9xonV6Q" class="class1" target="_blank">Raffaella Poma</a>. 
Visto non solo il suo talento per i video musicali ma anche per gli eventi paesani egli decide di passare alla scrittura del primo 
suo cortometraggio: The Dream.</p1>
</div>

<h6>Dario Ferrara</h6>

<p2><img src="Dario.jpg" width="150" height="150" float= "right" style="margin: 0 0 0 10px" align= "right">
Dario Ferrara nasce il 28 agosto 1985. Laurea triennale in Sassofono Classico, carattere estroverso, passione per la musica, 
informatica, hi-tech,...

CSS

#TopBar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:40px;
   background-color:#181818;
}

ul {
    display: block;/*list-style-type: none;*/
    margin: 0 0 0 180px;
    padding: 0;
    color: white; 
    position: fixed; 
    font-family: sans-serif;        
    font-size: 20px;

}

li {
    display: inline;
    margin: 5px;        
}

a {color: #ffffff;
  text-decoration:none;   
}

li.one {
    display: inline;
    margin: 5px;        
}

li.one a {
    color: #ffffff;
    text-decoration:none;   
}

a.class1 {color: black;
   text-decoration:underline;
}

al {
  display: block;/*list-style-type: none;*/
  margin: 0;
  padding: 0;
  color: white;
  position: fixed;
  font-family: sans-serif;
  font-size: 20px;
  right: 180px;
}

div {
    background-color: white;
    top: 40px;
    margin: 0;
}

p1{
    display: block;/*list-style-type: none;*/
    margin-right: 180px;    
    position: absolute;
    font-size: 15pt;
    font-family: sans-serif;    
    left: 180px;
    top:100px;
    color:black;
    z-index: -1;
}

p2{
    display: block;/*list-style-type: none;*/
    margin-left: 180px;    
    position: absolute;
    font-size: 15pt;
    font-family: sans-serif;    
    margin-right: 180px;
    top:325px;
    color:black;
    z-index: -1;
}

p3{
	display: block;/*list-style-type: none;*/
	margin-right: 180px;
	position: absolute;
	font-size: 15pt;
	font-family: sans-serif;
	left: 180px;
	top:550px;
	color:black;
	z-index: -1;
}

p1, p2, p3 {
    text-align:justify;
	height:160px;
	overflow-y:scroll;
}

h2 {
    position:fixed;
    right:50px;
    bottom:15px;
    color:black;
    z-index: 0;
	font-size: 110%;
}

h3 {
   position:fixed;
   left:50px;
   bottom:35px;
   color:black;
   z-index: 0;        
}

h5 {
    display: block;/*list-style-type: none;*/
    margin: 0;    
    position: relative;
    font-size: 20pt;
    font-family: sans-serif;    
    left: 180px;
    top: 50px;
    color:#585858;
    z-index: -1;    
}

h6 {
   ...