JSFiddle - React, Tailwind, and code Playground

by WimStienstra

HTML

<head>
      <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
</head>
<div class="center">
  <div class="test">Cantor</div>
  <div class="test">Laura</div>
  <div class="test">Sinp</div>
  <div class="test">Ricards requiem</div>
</div>
<body>

  <div class="center2" >
    <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"/>
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/>
    <img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg"/>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg"/>
    <img src="https://theinpaint.com/images/example-1-2.jpg"/>


  </div>
  
  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
</body>

CSS

.test{
  background-color: blue;
  width: 300px;
  height: 600px;
  text-align: center;
  padding-top: 45px;
  margin-left: 20px;
}
.center2 > img{
  height: 200px;
}

JavaScript

$('.center').slick({
  centerMode: true,
  centerPadding: '100px',
  slidesToShow: 3
});

$('.center2').slick({
centerMode:true,
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    variableWidth: true,
    variableHeight: true
});