JSFiddle - React, Tailwind, and code Playground

by Anil kolase

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="testimonial-slider" class="owl-carousel">
                <div class="testimonial">
                    <div class="testimonial-profile">
                        <h3 class="title">williamson</h3>
                        <span class="post">Web Developer</span>
                    </div>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
                    </p>
                </div>
                <div class="testimonial">
                    <div class="testimonial-profile">
                        <h3 class="title">Kristina</h3>
                        <span class="post">Web Designer</span>
                    </div>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
                    </p>
                </div>
                <div class="testimonial">
                    <div class="testimonial-profile">
                        <h3 class="title">Steve Thomas</h3>
                        <span class="post">Web Developer</span>
                    </div>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit ultrices mauris.
                    </p>
            ...

CSS

.testimonial{ 
  margin: 0 20px 50px;
  width: 70%;
}
.testimonial .pic{
    display: inline-block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 15px 15px 0;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}
.testimonial .testimonial-profile{
    display: inline-block;
    position: relative;
    top: 0;
    margin-bottom:10px;
}
.testimonial .title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #2f2f2f;
    text-transform: capitalize;
    margin: 0 0 7px 0;
}
.testimonial .post{
    display: block;
    font-size: 14px;
    color: #5d7aa7;
}
.testimonial .description{
    padding: 20px 22px;
    background: #1f487e;
    font-size: 15px;
    color: #fff;
    line-height: 25px;
    margin: 0;
    position: relative;
}
.testimonial .description:before,
.testimonial .description:after{
    content: "";
    border-width: 18px 0 0 18px;
    border-style: solid;
    border-color: #5d7aa7 transparent transparent;
    position: absolute;
    bottom: -18px;
    left: 0;
}
.testimonial .description:after{
    border-width: 18px 18px 0 0;
    left: auto;
    right: 0;
}
.owl-theme .owl-controls{
    margin-top: 10px;
    margin-left: 30px;
    text-align: center;
}
.owl-theme .owl-controls .owl-buttons div{
    opacity: 0.8;
    background: #fff;
}
.owl-prev:before,
.owl-next:before{
    content: "\f053";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #1f487e;
}
.owl-controls .owl-page span{
  display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    opacity: .5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791
}
.owl-controls .owl-page span:hover{
    opacity:1;
}
.owl-controls .owl-page{
      display: inline-block;
}
.owl-next:before{ content: "\f054"; }

JavaScript

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