JSFiddle - React, Tailwind, and code Playground

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-3 col-xs-12 text-center">
  <div class="block block-subscribe">
    <form action="#" method="post" id="newsletter-validate-detail">
      <div class="block-content">
        <div class="form-subscribe-header">
          <label for="newsletter"><span class="text-uppercase"><strong>Subscribe for NewsLetter</strong></span></label>
        </div>
        <div class="input-box">
          <input type="email" name="email" id="newsletter" title="Sign up for our newsletter" placeholder="Enter email address" class="input-text required-entry validate-email">
        </div>
        <div class="actions">
          <input type="button" class="btn btn-default btn-subscribe" value="SUBSCRIBE">
        </div>
      </div>
    </form>
  </div>
</div>

<div class="col-md-3 col-xs-12 text-center">
  <p class="text-uppercase h3"><strong>Testimonials</strong></p>
  <div class="comments"><div> <p> <i class="fa fa-quote-left"></i> <span>I am so happy to see brandoral here. I can now order anything for my practice without worrying about the quality.</span> <i class="fa fa-quote-right"></i>
            <br>
            <br><strong>Jona Walker</strong></p></div><div>   <p> <i class="fa fa-quote-left"></i> <span>The ease of setting up my store was a pleasure. We were trading in 1 day.</span> <i class="fa fa-quote-right"></i>
            <br>
            <br><strong>Gene Denver</strong></p> </div>
            
            <div>
              <p> <i class="fa...

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700");
  @import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css");
 body{font-family:lato}
 
.comments div p {


  -moz-animation: bounceIn 200ms forward;
  -webkit-animation: bounceIn 200ms forward;
  animation: bounceIn 200ms forward;
}
.comments .slick-active div p {
 -moz-animation: bounceIn 200ms forward;
  -webkit-animation: bounceIn 200ms forward;
  animation: bounceIn 200ms forward;
}

JavaScript

$(document).ready(function() {

  $('.comments').slick({
    autoplay: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplaySpeed: 5000,
    accessibility: true,
    pauseOnHover: true,
    speed: 1000,
    infinite: true,
    dots: false,
     fade: true,
    arrows: false
  });

});