JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/7.0.8/swiper-bundle.min.js"></script>
<div class="swiper">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>
					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>

					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>
					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>

					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>
					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>

					<div class="swiper-slide">
						<img src="https://svgshare.com/i/awm.svg" alt="">
					</div>
				</div>
			</div>

CSS

.swiper-slide {
	/*height: 0px;*/
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/*background: linear-gradient(129.59deg, rgba(255, 255, 255, 0.2) -20.74%, rgba(255, 255, 255, 0) 100%);*/
	background-color: red;
	border-radius: 50%;
	padding: 0 20px;
	margin-bottom: 45px;
}

 .swiper-slide img {
	/*position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	max-width: 100px;
	width: 100%;
	height: auto;
	object-fit: cover;*/
	opacity: 0.7;
}

*{
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

JavaScript

const swiper = new Swiper('.swiper', {
  loop: false,
  spaceBetween: 40,
  slidesPerView: 7,
    
 breakpoints: {
      340: {
          slidesPerView: 2,
      },
      640: {
          slidesPerView: 3,
      },
      940: {
          slidesPerView: 4,
      },
      1068: {
          slidesPerView: 5,
      },

      1250: {
          slidesPerView: 6,
      },
  }
} );