JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pure-g">        
        <div class="pure-u-md-11-12 cont">
            <div data-target='1' class="slide slide--1" data-selected="true">
                <div class="slide__text slide__text--1">quis risus</div>
                <div class="slide__bg"></div>
                <div class="slide__img">
                    <div class="slide__close"></div>
                    <div class="slide__img-wrapper">

                    </div>
                </div>
                <div class="slide__bg-dark"></div>
                <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
                    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
                </a>
            </div>

            <div data-target='2' class="slide slide--2">
                <div class="slide__text">Lorem ipsum</div>
                <div class="slide__bg"></div>
                <div class="slide__img">
                    <div class="slide__close"></div>
                    <div class="slide__img-wrapper">

                    </div>
                </div>
                <div class="slide__bg-dark"></div>
                <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
                    <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
                </a>
            </div>

            <div data-target='3' class="slide slide--3">
                <div class="slide__text">Sed tincidunt</div>
                <div class="slide__bg"></div>
                <div class="slide__img">
                    <div class="slide__close"></div>
                    <div class="slide__img-wrapper">

                    </div>
                </div>
                <div class="slide__bg-dark"></div>
                <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter">
                    <img...

CSS

header {
    height: 100vh;
    background-color: gray;
}

.cont {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
    overflow: hidden;
    cursor: pointer;
}

.slide__bg {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    width: 100%;
    height: 100%;
    background-color: #161616;
    z-index: 1;
    -webkit-transition: 950ms;
    transition: 950ms;
    will-change: transform;
}

.slide__img {
    position: relative;
    height: 100%;
}

.slide__img-wrapper {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 125%;
    height: 120%;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: 950ms;
    transition: 950ms;
    will-change: transform;
}

.slide__close {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 100px;
    height: 100px;
    z-index: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity 200ms, z-index 0ms 200ms;
    transition: opacity 200ms, z-index 0ms 200ms;
}

.slide__close:after,
.slide__close:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 115px;
    height: 20px;
    border-radius: 20px;
    background-color: #fff;
    -webkit-transition: 500ms 500ms;
    transition: 500ms 500ms;
}

@media screen and (max-width: 960px) {
    .slide__close:after,
    .slide__close:before {
        width: 75px;
        height: 15px;
    }
}

.slide__close:after {
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-transform: rotate(45deg) scale(0, 0);
    transform: rotate(45deg) scale(0, 0);
}

.slide__close:before {
    left: -33px;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    -webkit-transform: rotate(-45deg) scale(0, 0);
   ...

JavaScript

$(document).ready(function() {
            const $cont = $('.cont');
            const $slide = $('.slide');
            const $closeBtn = $('.slide__close')
            const $text = $('.slide__text');
            const $iconTwitter = $('.icon-link--twitter');
            const numSlides = 6;
            const initialAnimDur = 5705;
            const animDelay = 1000;
            let initialAnim = true;
            let clickAnim = false;

            $(document).on('click', '.slide__bg-dark', function() {
                if (initialAnim || clickAnim) return;
                let _this = $(this).parent();
                let target = +_this.attr('data-target');
                clickAnim = true;

                _this.css({
                    'transform': 'translate3d(-100%, 0, 0)',
                    'transition': '750ms',
                    'cursor': 'pointer'
                })

                _this.find('.slide__img-wrapper').css({
                    'transform': 'translate3d(0, 0, 0) scale(.95, .95)',
                    'transition': '2000ms'
                })

                for (let i = target, length = $slide.length; i < length; i++) {
                    $('.slide--' + (i + 1)).css({
                        'transform': 'translate3d(0, 0, 0)',
                        'transition': '750ms'
                    })
                }

                for (let i = target, length = $slide.length; i > 1; i--) {
                    $('.slide--' + (i - 1)).css({
                        'transform': 'translate3d(-125%, 0, 0)',
                        'transition': '750ms'
                    })
                }

                setTimeout(function() {
                    $slide.not(_this).find('.slide__bg-dark').css({
                        'opacity': '0'
                    })
                }, 750)

                $closeBtn.addClass('show-close');
                $iconTwitter.addClass('icon-show');

                _this.find('.slide__text').css({
     ...