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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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="first-odd description">
                    <p class="">
                          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 class="testimonial-profile">
                          <h3 class="title">williamson</h3>
                          <span class="post">Web Developer</span>
                      </div>
                  </div>
                      <div class="second-odd description">
                    <p class="">
                          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 class="testimonial-profile">
                          <h3 class="title">williamson</h3>
                          <span class="post">Web Developer</span>
                      </div>
                  </div>
                </div>
                <div class="testimonial">
                    <div class="first-even description">
                    <p class="">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam varius eros consequat auctor gravida. Fusce tristique lacus at urna sollicitudin pulvinar. Suspendisse hendrerit...

CSS

.testimonial{ 
  margin: 0 20px 50px;
}
.testimonial .first-odd{ 
  width:70%;
}
.testimonial .second-odd{ 
   width:70%;
   margin-left:26%;
}
.testimonial .first-even{ 
  width:70%;
  margin-left:26%;
}
.testimonial .second-even{ 
   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: 10px;
    margin-bottom: 10px;
    display: block;
    text-align: right;
}
.testimonial .title{
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    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-bottom: 40px;
    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;
}
.owl-prev:before,
.owl-next:before{
    content: "\f053";
    font-family: 'FontAwesome';
    font-size: 25px;
    color: #5d7aa7;
}
.owl-prev{
    position: absolute;
    top: 40%;
    left: 0;
}
.owl-next{
    position: absolute;
    top: 40%;
    right: 0;
}
.owl-controls .owl-page span{
  display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    opacity:...

JavaScript

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