JSFiddle - React, Tailwind, and code Playground

by kontrach

HTML

<div class="carousel">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide active">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
</div>

CSS

.carousel{
  display: flex;
  flex-wrap: wrap;
  width: 150px;
  height: 150px;
  border: 2px dotted red;
/*   align-items: center;
  justify-content: center; */
}

.slide{
  display: none;
  width: 130px;
  height: 80px;
  border: 2px dashed purple;
  flex-item: 1 0 auto;
  margin: 0 auto;
  transform: translateY(-50%);
  position: relative;
  top: 50%;
}

.slide.active{
  display: block;
}