JSFiddle - React, Tailwind, and code Playground

HTML

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

	<head>
        <title>Ejemplo</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!--[if lt IE 9]>
<script type="text/javascript">
    "'article aside footer header nav section time'".replace(/\w+/g,function(n){document.createElement(n)});
</script>
<![endif]-->
		
	<!-- Estilo general -->
	<link rel="stylesheet" href="css/estilo.css" type="text/css" media="screen" />

 
</head>
	
	<body>

	<div class="pestanas_textos">
		
		<div>
        
		<h5>TITULO</h5>		

		<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. <span class="cssToolTip">XXX<span> <img src="unidad_1/images/imagen_01.jpg">Texto toolTip... <a href="#">un enlace</a>Texto toolTip...</span> </span> ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.</p><br>
        
        <p>Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de...

CSS

/*------------------------------- Estilos globales -------------------------------*/
body {
	width: 940px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #EFEFEF;
}

.pestanas_textos div {
	width: 700px;
	height: 450px;
	margin-left: 240px;
	top: 97px;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	overflow: scroll;
	overflow-x: hidden;
 }
 
.pestanas_textos h5 {
	font-size: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000;
	text-indent: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
 }

.pestanas_textos p {
	font-size: 0.8em;
	font-family: Arial, Helvetica, sans-serif;
	color: ;#CE4646
	text-align: justify;
	line-height: 18px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 10px;
	text-align: justify;
	padding-bottom: 5px;
	color: #000;
 }
/*------------------------------- Fin Estilos globales -------------------------------*/	




/* El tooltip */
.cssToolTip span {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	position: relative;
	color: #000000;
	background-color: #E3E2D5;
	border-radius: 2px;
	box-shadow: 5px 5px 5px #7B7B7B;
	display: none;
	padding: 10px 10px 10px 10px;
	max-width: 360px;
	position: absolute;
	top: auto;
	left: auto;
	z-index: 100;
	-webkit-box-shadow: 5px 5px 5px #7B7B7B;
	}
 
.cssToolTip:hover span {
	display: inline;
	min-width: 250px;
	}

.cssToolTip span img {
	margin-right: 5px;
	float: left;
	}

span {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	color: #FF0000;
	}