JSFiddle - React, Tailwind, and code Playground

HTML

<div id="verti">
<ul>
    <li><a href="#1">Internal</a></li>
    <li><a href="#2">Demos</a></li>
    <li><a href="#3">Best Practice</a></li>
    <li><a href="#4">Marketing</a></li>
    <li><a href="#5">Papers & Public</a></li>
    <li><a href="#6">Validation</a></li>
    <li><a href="#7">Training</a></li>
</ul>
</div>

<div id="image">
<img src="/home/adapco/Desktop/cdLogoBlueSmall.png" >
</div>
<div id="slideshow">
<img src="/home/adapco/Desktop/CD-adapco-STAR-CCM+.jpg" class="active" width="500" height="150">
<img src="/home/adapco/Desktop/abstract-colorful-background-20.jpg" alt="" width="500" height="150">
<img src="/home/adapco/Desktop/1096687-Background-Of-Colorful-Paint-Splatters-On-White.jpg" alt="" width="500" height="150">
<img src="/home/adapco/Desktop/11660174-abstract-vector-background-futuristic-colorful-strip-technology-illustration-eps10.jpg" alt="" width="500" height="150">
</div>
<div id="cont">
<iframe src="" name="name">
</iframe>
</div>
<div id="hori">
<ul>
<li><a href="/home/adapco/Desktop/ksa1" target="name">Aerospacexxxxxxxxxxxxx</a></li>
<li><a href="/home/adapco/Desktop/ksa2.css" target="name">Automotive</a></li>
<li><a href="#">Energy</a></li>
<li><a href="#">IC Engines</a></li>
<li><a href="#">IT</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Wind</a></li>
<li><a href="#">Turbo</a></li>
</ul>
</div>
<table>
<tr>
<th>Date</th>
<th>Description</th>
<th>File</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

CSS

#image img
{
  padding:6px;
  border-top:0px solid #ddd;
  border-left:0px solid #ddd;
  border-bottom:0px solid #c0c0c0;
  border-right:0px solid #c0c0c0;
  display:block;
  position:relative;
  top:-200px;  
  left:-750px;
  margin-left:auto;
  margin-right:auto;
}
#cont
{
 width:600px;
 height:250px;
 border:1px solid #000;
 overflow:hidden;
 position:absolute;
 top:20%;
 right:550px;
 margin-top:1%;
}
#cont iframe
{
 width:600px;
 height:250px;
 border:0 solid;
 margin-left:auto;
 margin-right:auto;
 position:relative;
 top:5px;
}

#hori
{
 width: 70em;
 margin-left:350px;
 
}

#hori ul li
{
 display:inline;
 float:left;
 list-style:none;
 
}

#hori ul
{
 padding:0;
 margin-top:-700px; 
}

#hori li
{
 padding:0;
 text-align:center;
 width:7em; 
 float:left;
 list-style:none
 height:35px;
 margin-left:15px;
 background:#38ACEC;
 -moz-border-radius: 70px;
 border-radius: 70px;
}

#verti 
{
 float:bottom;
 width:200px;
 margin-top:50px;
 position:relative;

}

#verti ul li
{
 list-style:none;
 text-decoration:none;
}

#verti ul
{
 padding:0;
 margin:0;

}

#verti li
{
 width:150px;
 background:#38ACEC;
 margin-bottom:9px;
 position:relative;
 top:250px;
 -moz-border-radius:80px;
 border-radius:80px;
 text-align:center;
}
#slideshow
{
 position:relative;
 height:500px;
 right:-570px;
 top:-350px
}

#slideshow img
{
 position:absolute;
 top:0;
 left:0;
 z-index:8;
}

#slideshow img.active
{
 z-index:10;
}

#slideshow img.last-active
{
 z-index:9;
}
table,th,td
{
border:1px solid black;
width:650px;
position:relative;
right:-480px;
margin-top:20%;
}
th
{
 background-color:#38ACEC;
 color:white;
}

JavaScript

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    var $sibs  = $active.siblings();
    var rndNum = Math.floor(Math.random() * $sibs.length );
    var $next  = $( $sibs[ rndNum ] );
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});