JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slides">
    <div class="slide start">Some quote goes in here for people who are looking at this</div>
    <div class="slide">Neturino stars are radical</div>
    <div class="slide">World isn't getting larger as fast as you would think</div>
    <div class="slide">Simpler is better</div>
    <ul class="nav"></ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
.slides {
    background-color: #333;
    height: 400px;
    line-height: 400px;
    color: #fff;
    font-size: 6vw;
    overflow: hidden;
    position: relative;
}
.slides > * {
    line-height: 1;
}
.slides::before {
    opacity: 0;
    transition: opacity 1s;
    content:'';
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100%;
    left: 0;
    background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}
.slides:hover::before {
    opacity: 1;
}
.slide {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    padding: 30px;
}
.slides .nav {
    text-align: center;
    font-size: 1rem;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.slides .nav li {
    display: inline-block;
    margin: 0 5px;
    border-radius: 1000px;
    line-height: 11px;
    height: 11px;
    width: 11px;
    background-color: #ddd;
    box-shadow: 1px 1px 1px #222;
    list-style-type: none;
    opacity: .2;
    cursor: pointer;
    user-select: none;
    transition: opacity .5s;
}
.slides .nav li:hover {
    opacity: 1;
}
.slides .nav li.white {
    opacity: 1;
}

JavaScript

var cont = $('.slides'),
    slide = cont.find('.slide'),
    nav = cont.find('.nav'),
    li = null,
    len = slide.length,
    index = slide.filter('.start').index();

for (var i = 0; i < len; i++) {
    nav.append($('<li>'));
}

li = nav.find('li');

showSlide();
slide.stop().eq(index).show();

function updateLi() {
    li.removeClass('white');
    li.eq(index).addClass('white');
}

function showSlide() {
    slide.stop().fadeOut().eq(index).stop().fadeIn();
    updateLi();
}
cont.click(function () {
    index = ++index % len;
    showSlide();
});

nav.click(function (e) {
    e.stopPropagation();
});

li.click(function (e) {
    index = $(this).index();
    showSlide();
});