JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
			<div class="col1">
				<img src="images/corner.png"><h2>GENERALITA'</h2>
						
					<p>L'Umbria è una delle 20 regioni dell'Italia centrale, ricca di paesaggi immersi nel 
					verde delle valli e di borghi antichi, comprende 888.908 abitanti e si trova nel cuore 
					della penisola con una superficie di 8.456 km². Di questa regione fa parte il quarto 
					lago naturale più esteso d'Italia, il
					
						<div onclick="void(0);" class="tooltip">Trasimeno
							<div class="info">
									
								<div class="text">Situato in posizione centrale rispetto alle città d’arte
								del centro Italia il suo comprensorio è composto da otto comuni, alcuni dei
								quali adagiati sulle colline (Città della Pieve, Paciano, Panicale e 
								Piegaro) ed altri (Castiglione del Lago, Magione, Passignano sul Trasimeno 
								e Tuoro sul Trasimeno) direttamente affacciati sullo specchio d´acqua.<br><br>
								Della bellezza e armonia di questi luoghi se ne accorse anche il principe 
								Trasimeno che, rimasto affascinato da questo paesaggio, si imbatté nella 
								bellezza della ninfa Agilla. Da questo duplice incontro nacque una passione
								che finì tragicamente con la morte del principe. Da allora il lago prese il
								nome di Trasimeno e si dice che quando il vento accarezza le sue acque, si
								possa ancora udire il malinconico lamento della ninfa Agilla che piange 
								alla ricerca del suo amato.</div>
								
								<a class="more" href="#" target="_blank">More</a>
							</div>
						</div>, il lago di 
						
						<div onclick="void(0);" class="tooltip2">Piediluco
							<div class="info2">
								
								<div class="text2">Piediluco è un pittoresco centro il cui nome significa "ai 
								piedi del bosco sacro". Con un assetto rimasto quello del medioevo, con le sue 
								basse casette colorate, è in realtà dislocato nello stretto lembo di terra che 
								corre tra il lago ed il monte. Il lago,...

CSS

body {
  background-color: black;
}

.col1 {
	position: relative;
  float: left;
  left: 125px;
	width: 60%;
	padding: 0;
	margin-left: 30px;
	background-color: #FFFFFF;
	border: 1px solid gray;
	box-shadow: 5px 5px 5px gray;
}

.col1 img {
	position: relative;
	width: 100%;
	height: 80px;
	margin: 0;
	padding: 0;
}

.col1 h2 {
	position: relative;
	text-align: center;
	top: -58px;
}

.col1 p {
	margin: 0;
	padding: 0;
}

.tooltip, .tooltip2, .tooltip3, .tooltip4 {
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #5790ce;
}

.tooltip:hover .info, .tooltip:focus .info,
.tooltip2:hover .info2, .tooltip2:focus .info2,
.tooltip3:hover .info3, .tooltip3:focus .info3,
.tooltip4:hover .info4, .tooltip4:focus .info4 {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.info {
  box-sizing: border-box;
  position: absolute;
  bottom: -380px;
  left: 95px;
  display: block;
  background: #FFFFFF;
  border: 1px solid #000000;
  width: 500px;
  font-size: 25px;
  line-height: 24px;
  text-align: justify;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: all .5s ease-out;
}

.info2 {
  box-sizing: border-box;
  position: absolute;
  bottom: -333px;
  left: 88px;
  display: block;
  background: #FFFFFF;
  border: 1px solid #000000;
  width: 500px;
  font-size: 25px;
  line-height: 24px;
  text-align: justify;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: all .5s ease-out;
}

.info3 {
  box-sizing: border-box;
  position: absolute;
  bottom: -333px;
  left: 88px;
  display: block;
  background: #FFFFFF;
  border: 1px solid #000000;
  width: 500px;
  font-size: 25px;
  line-height: 24px;
  text-align: justify;
  cursor: text;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -20px, 0);
  transition: all .5s ease-out;
}

.info4 {
  box-sizing: border-box;
  position: absolute;
 ...