JSFiddle - React, Tailwind, and code Playground

by Anil kolase

HTML

<script src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-sm-12">
		<div class="testimonial-carousel dots-right-btm sh-testimonial">
        <div class="testimonial-item">
            <div class="testimonial-brief">
                <div class="left-content">
                    <p>Bill, thank you for getting my transfers completed so quickly! You have done everything you said you would and more. I definitely will buy more credits from you in the future.</p>
                    <h6>Benjamin, <span>Hastings, NE</span></h6>
                </div>
                <div class="right-content">
                    <p>Wow! We just bought our WorldMark contract from Marc and saved over $5000! Thank you for explaining the benefits of buying timeshare vacations on the secondary market. Your knowledge, insight and guidance helped us make the right decision. We are excited to book our first trip.</p>
                    <h6>John and Elena, <span>Huntsville, AL</span></h6>
                </div>
            </div>
        </div>
        
         <div class="testimonial-item">
            <div class="testimonial-brief">
                <div class="left-content">
                    <p>Bill, thank you for getting my transfers completed so quickly! You have done everything you said you would and more. I definitely will buy more credits from you in the future.</p>
                    <h6>Benjamin, <span>Hastings, NE</span></h6>
                </div>
                <div class="right-content">
                    <p>Wow! We just bought our WorldMark contract from Marc and saved over $5000! Thank you for explaining the benefits of buying timeshare vacations on the secondary market. Your knowledge, insight and...

CSS

.sh-testimonial{
        font-size: 22px;
        padding: 20px 0;
        color: #a1a1a1;
        font-style: italic;
        position: relative;
    }
    .left-content{
       width: 60%;
   	   margin-bottom: 40px;
    }
    .right-content{
    	    width: 60%;
    margin-left: 40%;
    }
    ul li {
      display: inline-block;
    }

JavaScript

$('.testimonial-carousel').slick({
        arrows: true,
        dots: true,
        infinite: true,
        autoplay: true,
        speed: 300,
        autoplaySpeed: 10000,
        slidesToShow: 1,
        slidesToScroll: 1
    });