JSFiddle - React, Tailwind, and code Playground

by Fahd Murtaza

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<section class="trainer-slider">
    <div class="slide-outer">
        <div class="slide-content h-100 d-flex flex-column">

            <div class="slide-top mb-auto">
                <div class="slide-heading">
                    We got you. Seriously.
                </div>
                <div class="slide-text-top">
                    Team of our first class rockstar trainers, got you
                    covered.<br>
                    Health plans, strenght training… you name it.
                </div>
            </div>

            <div class="slide-bottom align-baseline">
                <div class="slide-trainer-name">
                    Ali Douhani
                </div>

                <div class="slide-bottom-text">
                    2018 Olympic weightlifting champion,<br>
                    2016 Crossfit Games finalist, 2013 Crossfit Games - 2nd
                    place
                </div>

                <div class="text-center slide-meet">
                    <a href="#">Meet all our coaches</a>
                </div>
            </div>

        </div>
        <div class="slide-content h-100 d-flex flex-column">

            <div class="slide-top mb-auto">
                <div class="slide-heading">
                    We got you. Seriously.
                </div>
                <div class="slide-text-top">
                    Team of our first class...

CSS

section {
  background: #ccc;
}
.slick-slide {
		opacity:0.6;
		transition:opacity 300ms ease-out;
}
.slick-center {
  opacity:1!important;
		transition:opacity 300ms ease-in;
}
.container {
  width: 600px;
}

JavaScript

$('.slide-outer').slick({
    arrows: true,
    variableWidth: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 1,
		slidesToScroll: 1,
    infinite: true
});