JSFiddle - React, Tailwind, and code Playground

HTML

<section class="review">
    <h2>Erfahrungsberichte</h2>
    <div class="testimonials">
      <div class="scroller">
        <div class="item">
          <div class="card">
            <p>
            Bibiijasdiajsiodasd
            </p>
            <span>Elise</span>
          </div>
        </div>
        <div class="item">
          <div class="card">
            <p>
       Blablablabla
            </p>
            <span>John</span>
          </div>
        </div>
        <div class="item">
          <div class="card">
            <p>
              Hier steht eine menge text blasdkasdjlaksjdö
            </p>
            <span>Anton</span>
          </div>
        </div>
      </div>
      <span class="btn prev"></span>
      <span class="btn next"></span>
    </div>
  </section>

CSS

/*SECTION Testemonials*/
.review {
  margin-bottom: 170px;
}
.testimonials > * {
  margin: 0;
  padding: 0;
}
.testimonials {
  max-width: 900px;
  margin: auto;
  padding: 15px;
  text-align: center;
  position: relative;
}
.scroller {
  margin: 0;
  padding: 0;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
}
.item {
  min-width: 100%;
  scroll-snap-align: center;
  background-color: var(--bg-color);
  margin-bottom: 10px;
  padding: 0 10px;
}
.card {
  background-color: var(--blue);
  padding: 40px 40px 40px;
  border-radius: var(--border-radius);
  z-index: 1;
  min-height: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card p {
  font-style: italic;
  line-height: 1.5;
  font-size: 20px;
  color: var(--white);
}
.card span {
  display: block;
  margin-top: 20px;
  color: var(--white);
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.testimonials .btn {
  position: absolute;
  top: 50%;
  margin-top: -15px;
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.53);
  z-index: 1;
  line-height: 30px;
  text-align: center;
  color: white;
  font-weight: bold;
}
.testimonials .btn:hover {
  background-color: rgba(95, 106, 117, 0.5);
  color: var(--blue);
}
.testimonials .btn.next {
  right: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}
.testimonials .btn.prev {
  left: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 480px) {
  .item {
    padding: 0 10px;
 ...

JavaScript

const testimonials = document.querySelector(".testimonials");
const scroller = testimonials.querySelector(".scroller");
const nextBtn = testimonials.querySelector(".btn.next");
const prevBtn = testimonials.querySelector(".btn.prev");
const itemWidth = testimonials.querySelector(".item").clientWidth;

nextBtn.addEventListener("click", scrollToNextItem);
prevBtn.addEventListener("click", scrollToPrevItem);

function scrollToNextItem() {
  if (scroller.scrollLeft < scroller.scrollWidth - itemWidth)
    // The scroll position is not at the beginning of last item
    scroller.scrollBy({ left: itemWidth, top: 0, behavior: "smooth" });
  // Last item reached. Go back to first item by setting scroll position to 0
  else scroller.scrollTo({ left: 0, top: 0, behavior: "smooth" });
}
function scrollToPrevItem() {
  if (scroller.scrollLeft != 0)
    // The scroll position is not at the beginning of first item
    scroller.scrollBy({ left: -itemWidth, top: 0, behavior: "smooth" });
  // This is the first item. Go to last item by setting scroll position to scroller width
  else
    scroller.scrollTo({
      left: scroller.scrollWidth,
      top: 0,
      behavior: "smooth",
    });
}