JSFiddle - React, Tailwind, and code Playground

by Filippo Bracci

HTML

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <title></title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="testimonial-slider" class="owl-carousel">
               
                <div class="testimonial-item equal-height style-6 testimonial-mtbtourviafrancigena" style="height: 254px;">
                    <div class="testimonial-image cell-left">
                        <img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
                    </div>
                    <div class="cell-right">
                        <div class="testimonial-name">Filippo
                        </div>
                        <div class="testimonial-job">Assistant Project Manager
                        </div>
                    </div>
                    <div class="testimonial-content quote"><i class="fa fa-quote-left">  
                        </i>This is one of the best WordPress themes I have used. All aspects are exactly what experienced designers and developers crave from a theme.
                    </div>
                </div>
                <div class="testimonial-item equal-height style-6" style="height: 254px;">
                    <div class="testimonial-image cell-left">
                        <img src="http://tivatheme.com/wordpress/wp-content/plugins/tiva-testimonials-slider/images/agnes.jpg" alt="Agnes A. Bell">
                    </div>
                    <div class="cell-right">
                        <div...

CSS

.owl-carousel .owl-item img {
    display: block;
    width: 17%;
    float: left;
    border: 5px solid #fff;
    border-radius: 20px;
    margin-left: 54px;
    margin-right: 35px;
    margin-top: 15px;
}
.testimonial-item.equal-height.style-6 {
    background-color: #eee;
    border-radius: 10px;
    margin: 10px;
}
.cell-right {
    text-align: center;
    margin-right: 80px;
    padding-top: 35px;
    padding-bottom: 20px;
}
.testimonial-name {
    font-weight: 600;
}
.testimonial-content.quote {
    padding: 17px 55px;
}
.et_right_sidebar #main-content .container:before{
    display: none;
}
#main-content .container {
    padding-top: 10px;
}
i.fa.fa-quote-left {
    padding: 0px 10px;
    color: #999;
}

JavaScript

$(document).ready(function(){
    $("#testimonial-slider").owlCarousel({
        items:2,
        itemsDesktop:[1000,2],
        itemsDesktopSmall:[980,1],
        itemsTablet:[768,1],
        pagination:true,
        navigation:false,
        navigationText:["",""],
        autoPlay:true
    });
});