JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/coverflowjs/coverflow/master/dist/coverflow.css">

<div id="conteneur"> 
 <nav><a href="#theme1">Thème 1</a> 
     <a href="#theme2">Thème 2</a>
     <a href="#theme3">Thème 3</a> </nav>

<div id="coverflow">
 
<ul>
 <li><a href="#theme1"><img src="http://placehold.it/350x350/E80000/FFFFFF" /> </a></li>
     <li><a href="#theme1"> <img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E8117F/FFFFFF" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E8117F/FFFFFF" /></a></li>
     <li><a href="#theme1"> <img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E8117F/FFFFFF" /></a></li>  
     <li><a href="#theme1"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E8117F/FFFFFF" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E8117F/FFFFFF" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme1"><img src="http://placehold.it/350x350/E80000/FFFFFF" /> </a></li> 
</ul>
<ul>
 <li><a href="#theme2"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme2"><img src="http://placehold.it/350x350/E80000/FFFFFF" /> </a></li>
 </ul>
<ul>
     <li><a href="#theme3"><img src="http://placehold.it/350x350" /></a></li>
     <li><a href="#theme3"><img src="http://placehold.it/350x350/E80000/FFFFFF" /> </a></li>
  </ul>

</div>
 </div>

CSS

a {
  font-family: raleway, time, sans-serif;
  font size: 18px;
  font-variant: small-caps;
  text-align: center;
  text-decoration:none;
  color: #550266;
}

a{
  outline: 0px solid red;
  padding: 10px 10px ;
  border: 5px solid transparent;
}
a:hover {
  color: black;
  outline: 0px solid transparent;
  padding: 10px 10px ;
  border: 2px solid black;
}

#conteneur {
  width: 900px;
  height:600px;
  margin: 2em auto;
  border: 1px solid #000;
}

JavaScript

$(function() {
    $('#coverflow').coverflow({
        active: 2,
        select: function(event, ui){
            console.log('here');
        }
    });
    $('#coverflow img').click(function() {
        if( ! $(this).hasClass('ui-state-active')){
            return;
        }
        $('#coverflow').coverflow('next');
    });
});