JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container3">
				<div id="graficos" class="box">
					<section class="slideshow">   
						<nav> 
							<ul> 
								<li><a href="#img01">13</a></li>
								<li><a href="#img02">14</a></li>
								<li><a href="#img03">15</a></li>
								<li><a href="#img04">16</a></li>
								<li><a href="#img05" style="padding-right: 8px;padding-left: 8px;">T</a></li>
							</ul> 
						</nav>
						<article id="img01" class="target"> 
							<figure style="margin:0px;">
								<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_13-12h.png" alt="1" style="width:438px; height:155px; border-radius:5px;">
								<div id="zoom3">
									<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_13-12h.png" style="text-align:center;">
								</div>
							</figure>
						</article> 
						<article id="img02" class="target"> 
							<figure style="margin:0px;">
								<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_14-12h.png" alt="2" style="width:438px; height:155px; border-radius:5px;">
								<div id="zoom3">
									<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_14-12h.png" style="text-align:center;">
								</div>
							</figure>
						</article> 
						<article id="img03" class="target"> 
							<figure style="margin:0px;">
								<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_15-12h.png" alt="3" style="width:438px; height:155px; border-radius:5px;">
								<div id="zoom3">
									<img src="http://www.dstech.com.br/sistema/18.monitoramento/02.arquivos/02.monpng/186_235_160_15-12h.png" style="text-align:center;">
								</div>
							</figure>
						</article> 
						<article id="img04" class="target"> 
							<figure style="margin:0px;">
								<img...

CSS

#graficos{
				width: 438px;
				height: 155px;
				background-color: #FFF;
				margin-left: 8px;
				border-radius: 5px;
			}
			#zoom3{
				position: relative;
				top: -400px;
				width:947px;
				height: 368;
				visibility: hidden;
				opacity: 0;
				-webkit-transition: all 300ms ease;
				-moz-transition: all 300ms ease;
				-ms-transition: all 300ms ease;
				-o-transition: all 300ms ease;
				transition: all 300ms ease;
			}
			#img01:hover #zoom3 {
			    visibility: visible;
			    opacity: 1;
			}
      #img02:hover #zoom3 {
			    visibility: visible;
			    opacity: 1;
			}
      #img03:hover #zoom3 {
			    visibility: visible;
			    opacity: 1;
			}
      #img04:hover #zoom3 {
			    visibility: visible;
			    opacity: 1;
			}
      #img05:hover #zoom3 {
			    visibility: visible;
			    opacity: 1;
			}
			nav{ 
				margin-left: 300px;
				margin-top: 130px;
				width: 125px;
				height: 22px;
				z-index: 20;  
				position: absolute; 
			}   
			nav ul{
				width: 126px;
				height: 22px;
				padding: 0px;
				margin: 0px;
			}
			nav li { 
				font-size: 10px;
				display: inline; 
			}   
			nav a { 
				background:#339999; 
				padding: 5px 5px; 
				position: relative;
				width: 20px;
				height: 21px;
				border-radius: 3px; 
				color:#FFF; font-weight: bold; 
				text-decoration: none; 
			} 
			nav a:hover{ 
				background: #3399FF; 
			}   
			.slideshow {
				width: 438px; height: 155px;
				overflow: hidden; 
			} 
			.target { 
				width: 438px; height: 155px; 
			} 
      .box{
				float: left;
			}
#container3{
				width: 100%;
				height: 155px;
				margin-top: 8px;
			}