JSFiddle - React, Tailwind, and code Playground

by Vipin Patil

HTML

<div class="container">
  <div id="tcb-testimonial-carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#tcb-testimonial-carousel" data-slide-to="0" class="active"></li>
      <li data-target="#tcb-testimonial-carousel" data-slide-to="1"></li>
      <li data-target="#tcb-testimonial-carousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <div class="row">
          <div class="col-xs-12">
            <figure class="clearfix">
             <!-- <div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg"> </div>-->
              <div class="col-md-10 col-sm-10 col-xs-12">
                <figcaption class="caption">
                  <p class="text-brand lead no-margin">I can't wait to test this out.</p>
                  <p><span class="glyphicon glyphicon-thumbs-up"></span> This is a testimonial window. Feedback of user can be displayed here.</p>
                  <blockquote class="no-margin">
                    <p>Someone Famous</p> <small><cite title="Source Title"><i class="glyphicon glyphicon-globe"></i> www.example1.com</cite></small> </blockquote>
                </figcaption>
              </div>
            </figure>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
          <div class="col-xs-12">
            <figure class="clearfix">
              <!--<div class="col-md-2 col-sm-2 col-xs-12"><img class="img-responsive media-object" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg"> </div>-->
              <div class="col-md-10 col-sm-10 col-xs-12">
                <figcaption class="caption">
                  <p class="text-brand lead no-margin">I can't wait to test this out.</p>
                  <p><span...

CSS

#tcb-testimonial-carousel {
  margin-top: 30px;
}

#tcb-testimonial-carousel a {
  color: #b20000;
}

#tcb-testimonial-carousel .text-brand {
  color: #b20000;
}

#tcb-testimonial-carousel .carousel-indicators .active {
  background: #b20000;
}

#tcb-testimonial-carousel .no-margin {
  margin: 0;
}

#tcb-testimonial-carousel .carousel-indicators li {
  border: 1px solid #ccc;
}

#tcb-testimonial-carousel .carousel-control {
  color: #b20000;
  width: 5%;
}

#tcb-testimonial-carousel .carousel-control:hover,
#tcb-testimonial-carousel .carousel-control:focus {
  color: #b20000;
}

#tcb-testimonial-carousel .carousel-control.left,
#tcb-testimonial-carousel .carousel-control.right {
  background-image: none;
}

#tcb-testimonial-carousel .item {
  padding: 15px 40px;
  background: #f8f8f8;
}

#tcb-testimonial-carousel .media-object {
  margin: auto;
}

@media screen and (max-width: 768px) {
  #tcb-testimonial-carousel .media-object {
    margin-bottom: 15px;
  }
}