Testimonials / reviews

<!-- Testimonial -->
<blockquote class="testimonial">
  <div class="card border-0 shadow-sm">
    <span class="testimonial-mark"></span>
    <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  </div>
  <footer class="d-flex justify-content-center align-items-center pt-4">
    <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
    <div class="ps-3">
      <h6 class="fs-sm mb-n1">Mary Alice Grant</h6>
      <span class="fs-ms text-muted">Desperate housewife</span>
    </div>
  </footer>
</blockquote>

<!-- Testimonials carousel -->
<div class="tns-carousel">
  <div class="tns-carousel-inner" data-carousel-options='{"items": 2, "controls": false, "responsive": {"0":{"items":1},"750":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 30}}}'>
    <blockquote class="testimonial mb-2">
      <div class="card border-0 shadow-sm"><span class="testimonial-mark"></span>
        <div class="card-body fs-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
      <footer class="d-flex justify-content-center align-items-center pt-4">
        <img class="rounded" width="50" src="path-to-picture" alt="Mary Grant"/>
        <div class="ps-3">
          <h6 class="fs-sm mb-n1">Mary Alice Grant</h6>
          <span class="fs-ms text-muted">Desperate housewife</span>
        </div>
      </footer>
    </blockquote>

    <blockquote class="testimonial mb-2">
      ...
    </blockquote>

    <!-- Add as many testimonials as you need -->
  </div>
</div>

<!-- Product review -->
<div class="product-review">
  <div class="d-flex mb-3">
    <div class="d-flex align-items-center me-4 pe-2">
      <img class="rounded-circle" width="50" src="path-to-picture" alt="Rafael Marquez"/>
      <div class="ps-3">
        <h6 class="fs-sm mb-0">Rafael Marquez</h6>
        <span class="fs-ms text-muted">June 28, 2019</span>
      </div>
    </div>
    <div>
      <div class="star-rating">
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star-filled active"></i>
        <i class="star-rating-icon ci-star"></i>
      </div>
      <div class="fs-ms text-muted">83% of users found this review helpful</div>
    </div>
  </div>
  <p class="fs-md mb-2">Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est...</p>
  <ul class="list-unstyled fs-ms pt-1">
    <li class="mb-1">
      <span class="fw-medium">Pros: </span>Consequuntur magni, voluptatem sequi, tempora
    </li>
    <li class="mb-1">
      <span class="fw-medium">Cons: </span>Architecto beatae, quis autem
    </li>
  </ul>
  <div class="text-nowrap">
    <button class="btn-like" type="button">15</button>
    <button class="btn-dislike" type="button">3</button>
  </div>
</div>

<!-- Post comment -->
<div class=" d-flex align-items-start">
  <img class="rounded-circle" width="50" src="path-to-picture" alt="Laura Willson"/>
  <div class="ps-3">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="fs-md mb-0">Laura Willson</h6>
      <a class="nav-link-style fs-sm fw-medium" href="#">
        <i class="ci-reply me-2"></i>
        Reply
      </a>
    </div>
    <p class="fs-md mb-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <span class="fs-ms text-muted">
      <i class="ci-time align-middle me-2"></i>
      Sep 7, 2019
    </span>
  </div>
</div>