JSFiddle - React, Tailwind, and code Playground

by fabricior

HTML

<div id="carousel-cardapio" class="carousel slide">
    <div class="carousel-inner">

        <div class="item active">
            <div class="row">
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive" src="http://placehold.it/260x180" alt=""/>
                        <div class="carousel-caption">This is a caption</div>
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive" src="http://placehold.it/260x180" alt=""/>
                        <div class="carousel-caption">This is a caption</div>
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive" src="http://placehold.it/260x180" alt=""/>
                        <div class="carousel-caption">This is a caption</div>
                    </a>
                </div>
            </div>
        </div>
        
        <div class="item">
            <div class="row">
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive" src="http://placehold.it/260x180" alt=""/>
                        <div class="carousel-caption">This is a caption</div>
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive" src="http://placehold.it/260x180" alt=""/>
                        <div class="carousel-caption">This is a caption</div>
                    </a>
                </div>
                <div class="col-xs-4">
                    <a href="http://placehold.it/260x180">
                        <img class="img-responsive"...

CSS

#carousel-cardapio .item a .carousel-caption {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
	color: #fff;
	text-shadow: none;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 700;
}
#carousel-cardapio .item a .carousel-caption {
	position: absolute;
}
#carousel-cardapio .item a:hover .carousel-caption:before,
#carousel-cardapio .item a:focus .carousel-caption:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
#carousel-cardapio .item a .carousel-caption:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #faa96f;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
#carousel-cardapio .item a .carousel-caption:before {
	background-color: #623767;
}
#carousel-cardapio .item a .carousel-caption {
	text-shadow: none;
}
#carousel-cardapio {
	margin: 80px 0;
	padding: 0 60px;
}
#carousel-cardapio .carousel-control {
	width: 60px;
}
#carousel-cardapio .carousel-control.left,
#carousel-cardapio .carousel-control.right {
	background: none;
}
#carousel-cardapio .carousel-control .icon-next,
#carousel-cardapio .carousel-control .glyphicon-chevron-right {
	right: 0;
	margin-right: 0;
}
#carousel-cardapio .carousel-control .icon-prev,
#carousel-cardapio .carousel-control .glyphicon-chevron-left {
	left:...

JavaScript

$('#carousel-cardapio').carousel({wrap: true});