JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="carousel">
  <div class="slide">

  </div>
  <div class="slide">

  </div>
  <div class="slide">

  </div>
  <div class="slide active">

  </div>
  <div class="slide active">

  </div>
  <div class="slide active center">

  </div>
  <div class="slide active">

  </div>
  <div class="slide active">

  </div>
  <div class="slide">

  </div>
  <div class="slide">

  </div>
  <div class="slide">

  </div>
</div>

SCSS

.slide {
  width: 100%;
  height: 40px;
  background: grey;
  margin-bottom: 10px;
}

.slide~.center{
  background: red;
}