JSFiddle - React, Tailwind, and code Playground

by DmitrySemenov

HTML

<link rel="stylesheet" href="http://dimsemenov.com/plugins/royal-slider/royalslider/royalslider.css">
<link rel="stylesheet" href="http://dimsemenov.com/plugins/royal-slider/royalslider/skins/default/rs-default.css">
<script src="http://dimsemenov.com/plugins/royal-slider/royalslider/jquery.royalslider.min.js"></script>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis consectetur laudantium veritatis optio ex illo veniam tenetur nobis aperiam soluta iste distinctio quam dolor eum fugiat! Debitis a similique modi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis consectetur laudantium veritatis optio ex illo veniam tenetur nobis aperiam soluta iste distinctio quam dolor eum fugiat! Debitis a similique modi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis consectetur laudantium veritatis optio ex illo veniam tenetur nobis aperiam soluta iste distinctio quam dolor eum fugiat! Debitis a similique modi.
<div class="royalSlider rsDefault">
 
    <div><div class="slide-content" style="background:green;width:120px;height:100px;">Slide 1 green</div></div>
    <div><div class="slide-content" style="background:red;width:50px;height:200px;">Slide 2 red</div></div>
</div>

CSS

html,body,div {
    margin:0; padding:0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.royalSlider {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto;
    width: auto;
}
.rsDefault,
.rsDefault .rsOverflow,
.rsDefault .rsSlide {
    background:none;
}
.slide-content {
    font-size:20px;
    transition: all 0.5s linear;
    opacity:0;
    padding:10px;
    margin:0 auto;
}
.rsActiveSlide .slide-content {
    opacity:1;    
}

JavaScript

$('.royalSlider').royalSlider({
    addActiveClass:true,
    autoScaleSlider:false,
    transitionType:'fade',
    transitionSpeed:500
});