Testimonials / reviews

<!-- Default testimonial -->
<blockquote class="blockquote">
  <p class="pb-2 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
  <footer class="d-flex align-items-center">
    <img class="me-3 rounded-circle" src="path-to-image" width="72" alt="Author">
    <div>
      <h3 class="h6 mb-0">Courtney Alexander</h3>
      <span class="fs-sm text-muted">Position, Company</span>
    </div>
  </footer>
</blockquote>

<!-- Card testimonial -->
<div class="blockquote-card card border-0 shadow-sm">
  <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
    <blockquote class="blockquote">
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
    </blockquote>
  </div>
  <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 d-flex align-items-center">
    <img class="me-3 rounded-circle" src="path-to-image" width="72" alt="Author">
    <div>
      <h3 class="h6 mb-0">Eleanor Pena</h3>
      <span class="fs-sm text-muted">Position, Course</span>
    </div>
  </div>
</div>

<!-- Inside carousel: Style 1 -->
<div class="tns-carousel-wrapper tns-nav-inverse tns-controls-outside">
  <div class="tns-carousel-inner" data-carousel-options='{
    "autoHeight": true
  }'>

    <!-- Carousel item -->
    <div class="pb-md-5 px-md-4">
      <div class="blockquote-card card border-0 shadow-sm mb-md-4">
        <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
          <blockquote class="blockquote">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
          </blockquote>
        </div>
        <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 d-flex align-items-center">
          <img class="me-3 rounded-circle" src="path-to-image" width="72" alt="Author">
          <div>
            <h3 class="h6 mb-0">Courtney Alexander</h3>
            <span class="fs-sm text-muted">Position, Company </span>
          </div>
        </div>
      </div>
    </div>

    <!-- Carousel item -->
    <div class="pb-md-5 px-md-4">
      <div class="blockquote-card card border-0 shadow-sm mb-md-4">
        <div class="card-body mt-sm-4 mx-xl-5 mx-sm-4 pb-0">
          <blockquote class="blockquote">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
          </blockquote>
        </div>
        <div class="card-footer mb-sm-4 mx-xl-5 mx-sm-4 pt-0 border-0 d-flex align-items-center">
          <img class="me-3 rounded-circle" src="path-to-image" width="72" alt="Author">
          <div>
            <h3 class="h6 mb-0">Eleanor Pena</h3>
            <span class="fs-sm text-muted">Position, Course</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Inside carousel: Style 2 -->
<div class="tns-carousel-wrapper">
  <div class="tns-carousel-inner" data-carousel-options='{
    "gutter": 15,
    "nav": false,
    "controlsContainer": "#tns-custom-controls",
    "autoHeight": true
  }'>

    <!-- Carousel item -->
    <blockquote>
      <img class="mb-4 rounded-circle" src="path-to-image" width="72" alt="Author">
      <p class="pb-2 lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non. Congue tortor in tot euismod vulputate etiam eros. Vel accumsan at elit neque, ipsum.</p>
      <footer>
        <h3 class="h6 mb-0">Courtney Alexander</h3>
        <span class="fs-sm text-muted">Position, Company</span>
      </footer>
    </blockquote>

    <!-- Carousel item -->
    <blockquote>
      <img class="mb-4 rounded-circle" src="path-to-image" width="72" alt="Author">
      <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Justo, amet lectus quam viverra mus lobortis fermentum amet, eu. Pulvinar eu sed purus  facilisi. Vitae id turpis tempus ornare turpis quis non.</p>
      <footer>
        <h3 class="h6 mb-0">Eleanor Pena</h3>
        <span class="fs-sm text-muted">Position, Course</span>
      </footer>
    </blockquote>
  </div>
</div>

<!-- Custom controls (prev/next) -->
<div class="tns-custom-controls tns-controls-inverse mt-n5" id="tns-custom-controls" tabindex="0">
  <button class="mt-n2" type="button" data-controls="prev" tabindex="-1">
    <i class="ci-arrow-left"></i>
  </button>
  <button class="mt-n2" type="button" data-controls="next" tabindex="-1">
    <i class="ci-arrow-right"></i>
  </button>
</div>

<!-- Product review -->
<div class="mb-4 pb-4 border-bottom">
  <div class="row">
    <div class="col-md-3 col-sm-4 mb-sm-0 mb-3">
      <h3 class="mb-2 fs-lg">Annette Black</h3>
      <span class="d-block mb-3 fs-sm text-muted">1 day ago</span>
      <div class="mt-n1 star-rating">
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star-filled active"></i>
        <i class="sr-star ci-star"></i>
      </div>
    </div>
    <div class="col">
      <p class="mb-3">
        <a class="me-1 fw-bold text-decoration-none" href="#">@Devon Lane</a>
        Egestas fermentum natoque sollicitudin mauris. Facilisis praesent urna sed rhoncus quis pharetra pellentesque erat sagittis.
      </p>
      <div class="d-flex justify-content-between">
        <a class="nav-link p-0 fs-sm" href="#">
          <i class="ci-chat me-2 fs-base align-middle mt-n1"></i>
          Reply
        </a>
        <div class="d-flex">
          <a class="nav-link me-3 p-0 fs-sm" href="#">
            <i class="ci-like me-2 fs-base align-middle mt-n1 text-success"></i>
            2
          </a>
          <a class="nav-link p-0 fs-sm" href="#">
            <i class="ci-dislike me-2 fs-base align-middle mt-n1 text-danger"></i>
            1
          </a>
        </div>
      </div>
    </div>
  </div>
</div>