JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<div class="container-fluid">
	<div class="row">
		<div id="sg-carousel" class="carousel slide carousel-fade" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1" class=""></li>
				<li data-target="#carousel" data-slide-to="2" class=""></li>
				<li data-target="#carousel" data-slide-to="3" class=""></li>
			</ol>
			<!-- Carousel items -->
			<div class="carousel-inner carousel-zoom">
				<div class="item active"><img class="img-responsive" src="https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818" alt="">
				  <div class="carousel-caption">
					<h1  data-animation="animated zoomInLeft" class="cap-txt ">We are amazing</h1>
					<p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p>
					<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick" data-text="Send"><span>Send</span></button>
				  </div>
				</div>
			   <div class="item"><img class="img-responsive" src="https://images.pexels.com/photos/48726/pexels-photo-48726.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="">
				  <div class="carousel-caption">
					<h1 data-animation="animated zoomInLeft" class="cap-txt">We are smart developers</h1>
					<p data-animation="animated bounceInDown">Find more about me fiverr.com/sangrai</p>
					<button data-animation="animated bounceInUp" class="button button--tamaya button--border-thick"...

CSS

<link rel="stylesheet" href="http://cdn.bootcss.com/animate.css/3.5.1/animate.min.css">


* CROUSAL-STARTS */
#sg-carousel {
    position: relative;
    height: 100vh;
}
#sg-carousel .carousel-inner .item {
    height: 100vh;
}
.carousel-caption{top:50%;}
.carousel-caption h1 {
    font-size: 6em;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#sg-carousel .carousel-control.left {
    top: 48%;
}
#sg-carousel .carousel-control.right {
    top: 48%;
}
.uppr-txt {
    text-transform: uppercase;
    color: #fff;
    font-size: 35px;
}
#sg-carousel .carousel-control.left,
#sg-carousel .carousel-control.right {
    background-image: none;
    background-repeat: no-repeat;
    opacity: 0;
    text-shadow: none;
    transition: all 0.8s ease 0s;
}
.carousel-control {
    bottom: 0;
    color: #fff;
    font-size: 20px;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    top: 0;
    width: auto;
    transition: all 0.8s ease 0s;
}
.carousel-inner {
    box-shadow: 2px 6px 21px;
}
.fa-angle-right,
.fa-angle-left {
    font-size: 80px;
}
#sg-carousel:hover .carousel-control.left {
    left: 38px;
    transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.right {
    right: 38px;
    transition: all .2s ease 0;
}
#sg-carousel:hover .carousel-control.left,
#sg-carousel:hover .carousel-control.right {
    opacity: 1;
}
.carousel-inner > .item > a > img,
.carousel-inner > .item > img,
.img-responsive,
.thumbnail a > img,
.thumbnail > img {
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}
.item.active img {
    transition: transform 5000ms linear 0s;
    transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
    opacity: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-control {
    z-index: 2;
    font-size: 80px;
}
.carousel-caption {
    left:...

JavaScript

(function( $ ) {

    //Function to animate slider captions 
	function doAnimations( elems ) {
		//Cache the animationend event in a variable
		var animEndEv = 'webkitAnimationEnd animationend';
		
		elems.each(function () {
			var $this = $(this),
				$animationType = $this.data('animation');
			$this.addClass($animationType).one(animEndEv, function () {
				$this.removeClass($animationType);
			});
		});
	}
	
	//Variables on page load 
	var $myCarousel = $('#sg-carousel'),
		$firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");
		
	//Initialize carousel 
	$myCarousel.carousel();
	
	//Animate captions in first slide on page load 
	doAnimations($firstAnimatingElems);
	
	//Pause carousel  
	$myCarousel.carousel('pause');
	
	
	//Other slides to be animated on carousel slide event 
	$myCarousel.on('slide.bs.carousel', function (e) {
		var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
		doAnimations($animatingElems);
	});  
   
	
})(jQuery);