JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<section id="features" class="blue">
			<div class="content">
                
                <div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
</div>
    </div>
</section>

CSS

body{background:green;}

.blue h3{background:#fff;color:#3498db;font-size:36px;margin:10px;padding:2%;position:relative;text-align:center;}
    .button {background:#3498db;color:#fff;display:block;font-size:16px;margin:20px auto;padding:20px;text-align:center;text-decoration:none;width:48%;}
    .buttons{padding:0 20px 20px; margin-bottom: 10px;}
    .buttons .button{background:#FFF;color:#3498db;float:left;margin:5px;}
    .center .slick-center h3{-moz-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);-webkit-transform:scale(1.08);color:#e67e22;opacity:1;transform:scale(1.08);}
    .center h3{opacity:0.8;transition:all 300ms ease;}
    .content{margin:auto;padding:20px;width:600px;}
    .content:after,.buttons::after{clear:both;content:"";display:table;}
    .more,.button.first{margin-top:40px;}
    .red{background:#e74c3c;color:#fff;}
    .slick-slide .image{padding:10px;}
    .slick-slide img{border:5px solid #FFF;display:block;}
    .slick-slide img.slick-loading{border:0 }
    .slick-slider{margin:30px auto 50px;height: 200px}

JavaScript

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
});