JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script src="//fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Responsive-3D-Cover-Flow-Gallery-Plugin-with-jQuery/css/jquery-responsiveGallery.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-3D-Cover-Flow-Gallery-Plugin-with-jQuery/lib/modernizr.custom.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-3D-Cover-Flow-Gallery-Plugin-with-jQuery/src/jquery.responsiveGallery.js"></script>
<div class="row">
<div class="col s12 card-panel center">
<ul class="">
<li><a href="">theme 1</a></li>
<li><a href="">theme 2</a></li>
<li><a href="">theme 3</a></li>
<li><a href="">theme 4</a></li>
<li><a href="">theme 5</a></li>
<li><a href="">theme 6</a></li>
</ul>
</div>
</div>
<div class="row coverflow">
<div class="w-gallery">
<section id="responsiveGallery-container" class="responsiveGallery-container">
<a class="responsiveGallery-btn responsiveGallery-btn_prev" href="javascript:void(0);"></a>
<a class="responsiveGallery-btn responsiveGallery-btn_next" href="javascript:void(0);"></a>
<ul class="responsiveGallery-wrapper">
<li class="responsiveGallery-item">
<a href="#" class="responsivGallery-link">
<img src="https://www.w3schools.com/css/img_fjords.jpg" height="320" width="320" alt="" class="responsivGallery-pic">
</a>
<div class="w-responsivGallery-info">
<h2 class="responsivGallery-name">Google</h2>
<h3 class="responsivGallery-position">www.google.com</h3>
</div>
</li>
<li...
SCSS
header{
li{
display:inline;
padding: 5px 25px;
}
}
.coverflow{
overflow:hidden;
height: 400px;
}
.esencial-superior, .esencial-inferior{
ul{
li{
display: inline-block;
text-transform: uppercase;
padding: 5px;
}
}
}
footer{
p{
text-transform: capitalize;
margin:5px 0;
a{
color:black;
&:hover{
color:white;
}
}
}
}
JavaScript
$(".button-collapse").sideNav();
$(function () {
$('.responsiveGallery-wrapper').responsiveGallery({
animatDuration: 400, // ms
$btn_prev: $('.responsiveGallery-btn_prev'),
$btn_next: $('.responsiveGallery-btn_next')
});
});