JSFiddle - React, Tailwind, and code Playground

HTML

<section class="advantages">
    <div class="advantages__wrapper  slider">
      <h2 class="advantages__title  always-hidden">Наши преимущества</h2>
      <input class="slider__input" type="radio" name="advantages" id="advantages-input-1" checked>
      <input class="slider__input" type="radio" name="advantages" id="advantages-input-2">
      <input class="slider__input" type="radio" name="advantages" id="advantages-input-3">
      <ul class="advantages__list">
        <li class="advantages__item  advantages__item--fast  slider__item">
          <h3 class="advantages__item-title">Быстро</h3>
          <p>Мы делаем свою работу быстро! Два часа пролетят незаметно и вы - счастливый обладатель стрижки-минутки</p>
        </li>
        <li class="advantages__item  advantages__item--cool  slider__item">
          <h3 class="advantages__item-title">Круто</h3>
          <p>Забудьте, как вы стриглись раньше. Мы сделаем из вас звезду футбола или кино. Во всяком случае внешне.</p>
        </li>
        <li class="advantages__item  advantages__item--expensive  slider__item">
          <h3 class="advantages__item-title">Дорого</h3>
          <p>Наши мастера - профессионалы своего дела и не могут стоить дешево. К тому же, разве цена не дает определенный статус?</p>
        </li>
      </ul>
      <div class="advantages__toggles  slider__toggles">
        <label class="slider__toggle" for="advantages-input-1">1</label>
        <label class="slider__toggle" for="advantages-input-2">2</label>
        <label class="slider__toggle" for="advantages-input-3">3</label>
      </div>
    </div>
  </section>

SCSS

.advantages__list {
  padding: 0;
  margin: 0;

  list-style: none;
}

.slider__input {
  display: none;
}

.slider__toggles {
  margin: 0 auto;
  display: flex;
  width: 75px;
  justify-content: space-between;
}

.slider__toggle {
  display: inline-block;
  height: 6px;
  width: 6px;
  font-size: 0px;
  border: 2px solid #a5a5a5;
  transform: rotate(45deg);
  cursor: pointer;
}

.advantages__item {
  position: relative;
  min-height: 145px;
  margin-bottom: 23px;
  padding: 0 44px;
  padding-top: 125px;
}

.advantages__item-title {
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
}

.advantages__item:nth-child(n+2) {
  display: none;
}