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="#coverflow-0">Thème 1</a>
<a href="#coverflow-1">Thème 2</a>
<a href="#coverflow-2">Thème 3</a> </nav>
<div id="coverflow-0">
<img src="http://placehold.it/350x350/E80000/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E80000/FFFFFF" />
</div></div>
<div class="content">
<div id="coverflow-1">
<img src="http://placehold.it/350x350/E8117F/FFFFFF" />
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E80000/FFFFFF" />
</div></div>
<div class="content">
<div id="coverflow-2">
<img src="http://placehold.it/350x350" />
<img src="http://placehold.it/350x350/E80000/FFFFFF" />
</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() {
$('[id^=coverflow]').coverflow({
active: 2,
select: function(event, ui){
}
});
});