JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testimonials-box">
<div class="testimonials-slider">
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="http://webdesigntunes.com/tutorial/testimonials/images/team1.jpg"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">Bill Robinson <span>google.com</span></div>
                <div class="testimonials-carousel-content"><p>Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.</p></div>
            </div>
      </div>
       
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="http://webdesigntunes.com/tutorial/testimonials/images/team2.jpg"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">Michael Rocks <span>yahoo.com</span></div>
                <div class="testimonials-carousel-content"><p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo.</p></div>
            </div>
      </div>
       
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="http://webdesigntunes.com/tutorial/testimonials/images/team3.jpg"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">Andrew Bilson <span>dailydesignnotes.com</span></div>
                <div class="testimonials-carousel-content"><p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less...

CSS

.testimonials-box{margin:0 auto;color:#FFF}
.bx-wrapper .testimonials-thumbnail{ margin: 0px 0px 15px; }
.bx-wrapper .testimonials-title{ text-align: center;  margin: 25px 15px 3px; font-size: 24px; line-height: 1; }
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 35%; float: left; margin-right: 10px; }
.bx-wrapper .testimonials-carousel-thumbnail img{ display: block;   margin-right: 10px;width: 100px;}
.bx-wrapper .testimonials-carousel-context{ overflow: hidden; }
.bx-wrapper .testimonials-name{ font-size: 18px; margin-bottom: 10px;margin-top:-3px; font-weight:400;width:95%}
.bx-wrapper span{ font-size: 11px; margin-left:10px; color:#aaa; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; }
.bx-wrapper {position: relative;margin: 0 auto;padding: 0;width:94%;}
.bx-wrapper .slide {padding:0;margin:0;display: block;}
.bx-wrapper .bx-viewport {padding:10px;margin-left:0;z-index:1;width:100%;}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {position: absolute;display:none;bottom: -30px;width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px;background: url(http://webdesigntunes.com/tutorial/testimonials/images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}

.bx-wrapper .bx-next,.bx-wrapper .bx-prev {display:none}
.bx-wrapper .testimonials-carousel-content p{
    width:96%;margin:0; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; 
}

body{background:#181818;}

@media screen and (max-width:400px){
.bx-wrapper {width:85%;}
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 100%; margin:0 15px 10px 0;float:none }
.bx-wrapper .testimonials-carousel-thumbnail img{ width: 100%;height:auto}
}

JavaScript

$('.testimonials-slider').bxSlider({
       slideWidth: 800,
       minSlides: 1,
       maxSlides: 1,
       slideMargin: 32,
       auto: true,
       autoControls: true
     });