JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js"></script>
<div class="container-fluid">
        <div class="col-md-3">
        <div id="carouselExampleControls" class="carousel vert slide" data-ride="carousel" data-interval="false">            
            <div class="carousel-inner">
                <div class="card carousel-item active">
                    <img class="d-block mx-auto img-fluid" src="https://dummyimage.com/140x140/8DD1C8/fff.jpg&text=Facebook1" alt="First slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block mx-auto img-fluid" src="https://dummyimage.com/140x140/8DD1C8/fff.jpg&text=Google2" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block mx-auto img-fluid" src="https://dummyimage.com/140x140/8DD1C8/fff.jpg&text=Twitter3" alt="Third slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block mx-auto img-fluid" src="https://dummyimage.com/140x140/8DD1C8/fff.jpg&text=Reddit4" alt="Third slide">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
                <span class="carousel-control-prev-icon bg-dark rounded-circle" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
                <span class="carousel-control-next-icon bg-dark rounded-circle"...

CSS

.vert .carousel-item-next.carousel-item-start,
.vert .carousel-item-prev.carousel-item-end {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-end {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100% 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-start {
-webkit-transform: translate3d(0,-100%, 0);
        transform: translate3d(0,-100%, 0);
}

JavaScript

$('.carousel .carousel-inner .carousel-item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=1;i<2;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});