JSFiddle - React, Tailwind, and code Playground

by masfi

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item" >
        <div class="caption">
            <div class="fadeIn wow" data-wow-delay="0.3s">
                <p>111</p>
            </div>
            <div class="fadeIn wow" data-wow-delay="0.4s">
                <p>222</p>
            </div>
        </div>
        <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="" />
    </div> 
    <div class="item">
        <div class="caption">
            <div class="fadeInUp wow" data-wow-delay="0.1s">
                 <p>111</p>
            </div>
            <div class="fadeInUp wow" data-wow-delay="0.2s">
                  <p>222</p>
            </div>
            <div class="fadeIn wow" data-wow-delay="0.3s">
                  <p>333</p>
            </div>
        </div>
        <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="" />
    </div>
    <div class="item">
        <div class="caption">
            <div class="fadeIn wow" data-wow-delay="0.1s">
                <p>111</p>
            </div>
            <div class="fadeIn wow" data-wow-delay="0.2s">
                <p>222</p>
            </div>
        </div>
        <img src="http://owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt=""/>
    </div>
</div>

CSS

#owl-demo .item .caption {
    position:absolute;
    color:#fff;
    text-align:center;
    width:100%;
    z-index:100;
    font-size:50px;
}

#owl-demo .item img{
    display: block;
    width: 100%;
    height: auto;
}

JavaScript

$(document).ready(function($) {  
var owl = $('#owl-demo');
    owl.owlCarousel({
        items:1,
        loop:true,
        margin:10,
        autoplay:true,
        autoplayTimeout:1000,
        autoplayHoverPause:true
    });
    var wow = new WOW({
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    }
  });
wow.init();
});