Bootstrap 5 Reviews Components

<section class="position-relative py-20 pt-md-32 bg-dark overflow-hidden"><img class="position-absolute top-0 start-0 end-0 img-fluid" src="yofte-assets/elements/line-top.svg" alt=""/>
  <div class="position-relative container">
    <h2 class="mb-20 text-white" >What Customers Say</h2>
    <div class="position-relative mw-4xl mx-auto">
      <div class="position-absolute top-50 translate-middle-y start-0 end-0 border ms-n6 me-n6" style="height: 90%;"></div>
      <div class="position-relative mx-auto mb-20 py-12 py-md-28 bg-dark border border-white"><img class="mb-10 d-block mx-auto rounded-circle" style="width: 128px; height: 128px;" src="yofte-assets/images/placeholder-portrait.png" alt="" />
        <div class="position-relative mw-2xl px-4 mx-auto"><img class="d-none d-md-block position-absolute top-0 start-0 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/><img class="d-none d-md-block position-absolute top-0 end-0 img-fluid" src="yofte-assets/elements/quote.svg" alt=""/>
          <div class="mw-md mx-auto px-4">
            <h5 class="mb-16 text-white" >Tonight I had interdum at ante porta, eleifend feugiat nunc. In semper euismod mi a accumsan. Thaaank you! &#x1F44F;&#x1F4A5;</h5>
            <div class="d-flex flex-wrap align-items-center">
              <p class="mb-6 mb-md-0 text-muted"  >Alice Kenowski, NYC</p>
              <div class="ms-auto d-flex align-items-center justify-content-end"><a class="me-5 d-flex align-items-center justify-content-center bg-primary rounded-2" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
                  </svg></a><a class="d-flex align-items-center justify-content-center bg-info rounded-2" href="#" style="width: 48px; height: 48px;">
                  <svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
                  </svg></a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#" >Show More</a></div>
  </div>
</section>

<section class="py-12 py-md-24 bg-dark">
  <div class="container">
    <h3 class="fs-5 text-white mb-8">Recent reviews</h3>
    <div class="row mb-n12 py-10 border-top border-dark-light">
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div>
          <h6 class="text-white">Risako M</h6>
          <span class="text-muted">May 16, 2021</span>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div class="d-flex align-items-center justify-content-md-end justify-content-lg-start">
          <div class="d-flex align-items-center">
            <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#FFBB29"></path>
              <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#FFBB29"></path>
              <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#FFBB29"></path>
              <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#FFBB29"></path>
              <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#FFBB29"></path>
            </svg>
          </div>
          <span class="ms-3 text-white fw-bold">5</span>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-12">
        <div class="mw-xl">
          <h6 class="text-white mb-5">Can&rsquo;t say enough good things</h6>
          <p class="text-muted mb-4">You made it so simple. My new site is so much faster and easier to work with than my older site. I just choose the page, make the changes delighted me!.</p>
          <p class="text-muted mb-0">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once you turn off page transition preloader in theme options. Custom support was really quick to respond to all.</p>
        </div>
      </div>
    </div>
    <div class="row py-10 border-top border-dark-light">
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div>
          <h6 class="text-white">Jackie H</h6>
          <span class="text-muted">April 6, 2021</span>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div class="d-flex align-items-center justify-content-md-end justify-content-lg-start">
          <div class="d-flex align-items-center">
            <svg width="116" height="23" viewbox="0 0 116 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.2387 4.44347C10.5774 3.40101 12.0522 3.40101 12.3909 4.44347L13.6012 8.16814C13.7526 8.63434 14.1871 8.94998 14.6773 8.94998H18.5936C19.6897 8.94998 20.1455 10.3526 19.2587 10.9969L16.0903 13.2989C15.6937 13.587 15.5278 14.0977 15.6793 14.5639L16.8895 18.2886C17.2282 19.331 16.0351 20.1979 15.1483 19.5536L11.9799 17.2517C11.5833 16.9635 11.0463 16.9635 10.6497 17.2517L7.48135 19.5536C6.59458 20.1979 5.40143 19.331 5.74015 18.2886L6.95037 14.5639C7.10185 14.0977 6.9359 13.587 6.53933 13.2989L3.37093 10.9969C2.48416 10.3526 2.9399 8.94998 4.03601 8.94998H7.95236C8.44256 8.94998 8.877 8.63434 9.02848 8.16814L10.2387 4.44347Z" fill="#FFBB29"></path>
              <path d="M33.5795 4.44347C33.9182 3.40101 35.393 3.40101 35.7318 4.44347L36.942 8.16814C37.0935 8.63434 37.5279 8.94998 38.0181 8.94998H41.9344C43.0306 8.94998 43.4863 10.3526 42.5995 10.9969L39.4311 13.2989C39.0346 13.587 38.8686 14.0977 39.0201 14.5639L40.2303 18.2886C40.569 19.331 39.3759 20.1979 38.4891 19.5536L35.3207 17.2517C34.9241 16.9635 34.3871 16.9635 33.9906 17.2517L30.8222 19.5536C29.9354 20.1979 28.7423 19.331 29.081 18.2886L30.2912 14.5639C30.4427 14.0977 30.2767 13.587 29.8801 13.2989L26.7118 10.9969C25.825 10.3526 26.2807 8.94998 27.3768 8.94998H31.2932C31.7834 8.94998 32.2178 8.63434 32.3693 8.16814L33.5795 4.44347Z" fill="#FFBB29"></path>
              <path d="M56.9213 4.44347C57.26 3.40101 58.7348 3.40101 59.0736 4.44347L60.2838 8.16814C60.4353 8.63434 60.8697 8.94998 61.3599 8.94998H65.2762C66.3724 8.94998 66.8281 10.3526 65.9413 10.9969L62.7729 13.2989C62.3764 13.587 62.2104 14.0977 62.3619 14.5639L63.5721 18.2886C63.9108 19.331 62.7177 20.1979 61.8309 19.5536L58.6625 17.2517C58.2659 16.9635 57.7289 16.9635 57.3324 17.2517L54.164 19.5536C53.2772 20.1979 52.084 19.331 52.4228 18.2886L53.633 14.5639C53.7845 14.0977 53.6185 13.587 53.2219 13.2989L50.0536 10.9969C49.1668 10.3526 49.6225 8.94998 50.7186 8.94998H54.635C55.1252 8.94998 55.5596 8.63434 55.7111 8.16814L56.9213 4.44347Z" fill="#FFBB29"></path>
              <path d="M80.2631 4.44347C80.6018 3.40101 82.0766 3.40101 82.4154 4.44347L83.6256 8.16814C83.7771 8.63434 84.2115 8.94998 84.7017 8.94998H88.618C89.7142 8.94998 90.1699 10.3526 89.2831 10.9969L86.1147 13.2989C85.7182 13.587 85.5522 14.0977 85.7037 14.5639L86.9139 18.2886C87.2526 19.331 86.0595 20.1979 85.1727 19.5536L82.0043 17.2517C81.6077 16.9635 81.0707 16.9635 80.6742 17.2517L77.5058 19.5536C76.619 20.1979 75.4258 19.331 75.7646 18.2886L76.9748 14.5639C77.1263 14.0977 76.9603 13.587 76.5637 13.2989L73.3953 10.9969C72.5086 10.3526 72.9643 8.94998 74.0604 8.94998H77.9768C78.467 8.94998 78.9014 8.63434 79.0529 8.16814L80.2631 4.44347Z" fill="#FFBB29"></path>
              <path d="M103.605 4.44347C103.944 3.40101 105.418 3.40101 105.757 4.44347L106.967 8.16814C107.119 8.63434 107.553 8.94998 108.043 8.94998H111.96C113.056 8.94998 113.512 10.3526 112.625 10.9969L109.457 13.2989C109.06 13.587 108.894 14.0977 109.045 14.5639L110.256 18.2886C110.594 19.331 109.401 20.1979 108.515 19.5536L105.346 17.2517C104.95 16.9635 104.413 16.9635 104.016 17.2517L100.848 19.5536C99.9608 20.1979 98.7676 19.331 99.1064 18.2886L100.317 14.5639C100.468 14.0977 100.302 13.587 99.9055 13.2989L96.7371 10.9969C95.8504 10.3526 96.3061 8.94998 97.4022 8.94998H101.319C101.809 8.94998 102.243 8.63434 102.395 8.16814L103.605 4.44347Z" fill="#FFBB29"></path>
            </svg>
          </div>
          <span class="ms-3 text-white fw-bold">5</span>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-12">
        <div class="mw-xl">
          <h6 class="text-white mb-5">Very comfy and looks the part</h6>
          <p class="text-muted mb-4">You made it so simple. My new site is so much faster and easier to work with than my older site. I just choose the page, make the changes delighted me!.</p>
          <p class="text-muted mb-0">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once you turn off page transition preloader in theme options. Custom support was really quick to respond to all.</p>
        </div>
      </div>
    </div>
    <div class="row py-10 border-top border-dark-light">
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div>
          <h6 class="text-white">Laura G</h6>
          <span class="text-muted">February 24, 2021</span>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 mb-12">
        <div class="d-flex align-items-center justify-content-md-end justify-content-lg-start">
          <div class="d-flex align-items-center">
            <svg width="114" height="23" viewbox="0 0 114 23" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.2387 4.44347C8.57742 3.40101 10.0522 3.40101 10.3909 4.44347L11.6012 8.16814C11.7526 8.63434 12.1871 8.94998 12.6773 8.94998H16.5936C17.6897 8.94998 18.1455 10.3526 17.2587 10.9969L14.0903 13.2989C13.6937 13.587 13.5278 14.0977 13.6793 14.5639L14.8895 18.2886C15.2282 19.331 14.0351 20.1979 13.1483 19.5536L9.9799 17.2517C9.58332 16.9635 9.04632 16.9635 8.64974 17.2517L5.48135 19.5536C4.59458 20.1979 3.40143 19.331 3.74015 18.2886L4.95037 14.5639C5.10185 14.0977 4.9359 13.587 4.53933 13.2989L1.37093 10.9969C0.484162 10.3526 0.939902 8.94998 2.03601 8.94998H5.95236C6.44256 8.94998 6.877 8.63434 7.02848 8.16814L8.2387 4.44347Z" fill="#FFBB29"></path>
              <path d="M31.5795 4.44347C31.9182 3.40101 33.393 3.40101 33.7318 4.44347L34.942 8.16814C35.0935 8.63434 35.5279 8.94998 36.0181 8.94998H39.9344C41.0306 8.94998 41.4863 10.3526 40.5995 10.9969L37.4311 13.2989C37.0346 13.587 36.8686 14.0977 37.0201 14.5639L38.2303 18.2886C38.569 19.331 37.3759 20.1979 36.4891 19.5536L33.3207 17.2517C32.9241 16.9635 32.3871 16.9635 31.9906 17.2517L28.8222 19.5536C27.9354 20.1979 26.7423 19.331 27.081 18.2886L28.2912 14.5639C28.4427 14.0977 28.2767 13.587 27.8801 13.2989L24.7118 10.9969C23.825 10.3526 24.2807 8.94998 25.3768 8.94998H29.2932C29.7834 8.94998 30.2178 8.63434 30.3693 8.16814L31.5795 4.44347Z" fill="#FFBB29"></path>
              <path d="M54.9213 4.44347C55.26 3.40101 56.7348 3.40101 57.0736 4.44347L58.2838 8.16814C58.4353 8.63434 58.8697 8.94998 59.3599 8.94998H63.2762C64.3724 8.94998 64.8281 10.3526 63.9413 10.9969L60.7729 13.2989C60.3764 13.587 60.2104 14.0977 60.3619 14.5639L61.5721 18.2886C61.9108 19.331 60.7177 20.1979 59.8309 19.5536L56.6625 17.2517C56.2659 16.9635 55.7289 16.9635 55.3324 17.2517L52.164 19.5536C51.2772 20.1979 50.084 19.331 50.4228 18.2886L51.633 14.5639C51.7845 14.0977 51.6185 13.587 51.2219 13.2989L48.0536 10.9969C47.1668 10.3526 47.6225 8.94998 48.7186 8.94998H52.635C53.1252 8.94998 53.5596 8.63434 53.7111 8.16814L54.9213 4.44347Z" fill="#FFBB29"></path>
              <path d="M78.2631 4.44347C78.6018 3.40101 80.0766 3.40101 80.4154 4.44347L81.6256 8.16814C81.7771 8.63434 82.2115 8.94998 82.7017 8.94998H86.618C87.7142 8.94998 88.1699 10.3526 87.2831 10.9969L84.1147 13.2989C83.7182 13.587 83.5522 14.0977 83.7037 14.5639L84.9139 18.2886C85.2526 19.331 84.0595 20.1979 83.1727 19.5536L80.0043 17.2517C79.6077 16.9635 79.0707 16.9635 78.6742 17.2517L75.5058 19.5536C74.619 20.1979 73.4258 19.331 73.7646 18.2886L74.9748 14.5639C75.1263 14.0977 74.9603 13.587 74.5637 13.2989L71.3953 10.9969C70.5086 10.3526 70.9643 8.94998 72.0604 8.94998H75.9768C76.467 8.94998 76.9014 8.63434 77.0529 8.16814L78.2631 4.44347Z" fill="#FFBB29"></path>
              <path d="M101.605 4.44347C101.944 3.40101 103.418 3.40101 103.757 4.44347L104.967 8.16814C105.119 8.63434 105.553 8.94998 106.043 8.94998H109.96C111.056 8.94998 111.512 10.3526 110.625 10.9969L107.457 13.2989C107.06 13.587 106.894 14.0977 107.045 14.5639L108.256 18.2886C108.594 19.331 107.401 20.1979 106.515 19.5536L103.346 17.2517C102.95 16.9635 102.413 16.9635 102.016 17.2517L98.8476 19.5536C97.9608 20.1979 96.7676 19.331 97.1064 18.2886L98.3166 14.5639C98.4681 14.0977 98.3021 13.587 97.9055 13.2989L94.7371 10.9969C93.8504 10.3526 94.3061 8.94998 95.4022 8.94998H99.3186C99.8088 8.94998 100.243 8.63434 100.395 8.16814L101.605 4.44347Z" fill="#84878A"></path>
            </svg>
          </div>
          <span class="ms-3 text-white fw-bold">4.7</span>
        </div>
      </div>
      <div class="col-12 col-lg-6 mb-12">
        <div class="mw-xl">
          <h6 class="text-white mb-5">Can&rsquo;t say enough good things</h6>
          <p class="text-muted mb-0">Really nicely designed theme and quite fast loading. The quickness of page loads you can really appreciate once you turn off page transition preloader in theme options. Custom support was really quick to respond to all of the warnning if i ever need of the shirt.</p>
        </div>
      </div>
    </div>
  </div>
</section>