JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/slick/slick.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/slick/slick.css">
<div class="slider">

    <div class="slide-item" style="background-image:url('https://i.imgur.com/frZ5wtV.jpg');">
        
        <div class="slide-content">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet.</p>
        </div>        
    </div>
    
    <div class="slide-item" style="background-image:url('https://i.imgur.com/5ZEwdBZ.jpg');">
        <div class="slide-content">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
    
    <div class="slide-item" style="background-image:url('https://i.imgur.com/XpQHJEF.png');">
        <div class="slide-content">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente iure, libero, quia voluptatem reprehenderit soluta vitae perferendis exercitationem repellat culpa, commodi corporis saepe labore, at nobis in dicta nesciunt atque.</p>
        </div>
    </div>
    
    <div class="slide-item" style="background-image:url('https://i.imgur.com/7ypO9PM.jpg');">
        <div class="slide-content">
            <h3>Title 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente iure, libero, quia voluptatem reprehenderit soluta vitae perferendis exercitationem repellat culpa, commodi corporis saepe labore, at nobis in dicta nesciunt atque.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente iure, libero, quia voluptatem reprehenderit soluta vitae perferendis exercitationem repellat culpa, commodi corporis saepe labore, at nobis in dicta nesciunt atque.</p>
        </div>
    </div>
    
</div>

CSS

.slider {
    max-width: 350px;
    background: linear-gradient(45deg, rgba(214,0,121,1) 0%, rgba(54,95,219,1) 100%);
    border-radius: 5px;
    overflow: hidden;
}

.slide-item {
    position: relative;
    padding-top: 160%;
    background-size: cover;
    background-position: 50% 0;
    background-repeat: no-repeat;
}

.slide-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(114,54,217,0) 0%, rgba(114,54,217,0.5) 20%, rgba(214,0,121,1) 100%);
    padding: 4rem 1rem 6rem;
    color: #fff;
}

.slide-content *:first-child {
    margin-top: 0;
}

.slide-content *:last-child {
    margin-bottom: 0;
}

.slick-dots {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript

$(document).ready(function() {
    $('.slider').slick({
    	arrows: false,
        dots: true
    });
});