JSFiddle - React, Tailwind, and code Playground

by GMK Hussain

HTML

<h2>Add random classes with loop</h2>

<div class="caps-holder">
                <div class="caps h1 cap1">stunning aesthetics</div>
                <div class="caps h1 cap2">Vision Realized</div>
                <div class="caps h1 cap3">Be Memorable</div>
</div>

CSS

* { transition:all 0.3s ease 0s !important}
.caps-holder {
    border: 1px solid #ccc;
    height: 50px;
    padding: 10px;
}
.caps.h1 {
    font-size: 36px;
     display:none;
    transform:perspective(600px) rotateY(0deg)
        tra
}
.caps.c_active {
    display:block !important;    
    color:red;
    transform:perspective(600px);
}

JavaScript

$(function () {
  var $captions = $('.caps');
  (function _loop(idx) {
    $captions.removeClass('c_active').eq(idx).addClass('c_active');
    $captions.animate({fontSize: '3em'}, "slow");
      setTimeout(function () {
      _loop((idx + 1) % $captions.length);
    }, 4000);

  }(0));
});