JSFiddle - React, Tailwind, and code Playground

by pawangupta18

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
       <div class="testimonials">
 <h2>CLIENT TESTIMONIALS</h2>
                             
<div class="texttimonail_next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<div class="texttimonail_prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>   
<div class="clearfix"></div>
                
                </div>
                <div class="clearfix"></div>
       
<div class="owl-carousel owl-theme owl-loaded owl-drag">
   
                 
    
       
                   
    
       
                   
    
       
                   
    
       
             
 <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-2825px, 0px, 0px); transition: all 0.25s ease 0s; width: 4520px;"><div class="owl-item cloned" style="width: 555px; margin-right: 10px;"><div class="item">
          <div class="test-slider-inn">
                            <div class="test-slider-img">
                                <img src="http://speakzoo.com/wp-content/uploads/2018/08/user.jpg" alt="">
                            </div>
                            <div class="test-slider-text">
                                <p>I appreciate my English classes with Speakzoo. English was a completely new language and when I first arrived in the country, I could barely understand anything. With 1 year of classes, I can speak in the language comfortably. </p>
                                <p><span class="text-col">- Priyanka Walia</span></p>
                            </div>
                        </div>
                        
                </div></div><div class="owl-item...

CSS

/*=============================
testimonial section
===============================*/
/* ---------- accordin --------*/
.testimonal-sec{
    float: left;
    width: 100%;
    padding: 30px 0px;
    background: #fff;
}
.owl-prev{ display:none;}
 
.owl-next{display:none}
 
.texttimonail_prev {
	background-color: #e8e8e8;
	border-radius: 0px;
	float: right;
	height: 45px;
	margin-right: 53px;
	text-align: center;
	width: 45px;
	cursor: pointer;
	margin-top: -50px;
	z-index: 10000;
	position: relative;
}


.texttimonail_prev i {
    position: absolute;
    top: 11px;
    font-size: 20px;
    left: 18px;
    color: #747474;
} 
.texttimonail_next {
	background-color: #e8e8e8;
	border-radius: 0px;
	float: right;
	height: 45px;
	margin-right: 5px;
	text-align: center;
	width: 45px;
	cursor: pointer;
	margin-top: -50px;
	z-index: 100000;
	position: relative;
}

.texttimonail_next i {  position: absolute;
    top: 11px;
    font-size: 20px;
    left: 18px;
    color: #747474;}
.testimonials{
    float: left;
    width: 100%;
    margin-bottom: 20px;
}
.test-slider-inn{
    float: left;
    width: 100%;
    padding: 20px;
    border: 1px solid #e2e2e2;
    border-bottom: 2px solid #43b24b;
    border-radius: 5px;
    margin-bottom: 20px;
}
.test-slider-img {
    float: left;
    width: 26%
}
.test-slider-img img {
    border: 1px solid #d4d0d0;
    border-radius: 50%;
}
.test-slider-text {
    float: left;
    width: 74%;
    padding-left: 10px;
}

JavaScript

/ testimonial control left right arrow code start

    $('.texttimonail_next').on('click', function(event){
        event.preventDefault();
        $('.owl-prev').trigger('click');
    });
    
     $('.texttimonail_prev').on('click', function(event){
        event.preventDefault();
        $('.owl-next').trigger('click');
    });
    
	// testimonial control left right arrow code end
	
	$('.button-review').click(function(){
			$('.display-area') .stop() .slideToggle(1000);
			
		});