JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <div class="slide">
    <div class="slide__num">2000</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore eum, quaerat perferendis iste.</div>
  </div>
  <div class="slide">
    <div class="slide__num">2001</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore eum, quaerat perferendis iste.</div>
  </div>
  <div class="slide">
    <div class="slide__num">2002</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore eum, quaerat perferendis iste.</div>
  </div>
  <div class="slide">
    <div class="slide__num">2002</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore eum, quaerat perferendis iste.</div>
  </div>
  <div class="slide">
    <div class="slide__num">2003</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore eum, quaerat perferendis iste.</div>
  </div>
  <div class="slide">
    <div class="slide__num">2004</div>
    <div class="slide__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam officiis consequuntur omnis, quae impedit nihil suscipit reprehenderit eveniet, animi sunt ut maiores eos aliquid repudiandae tempore...

CSS

body {
  overflow: hidden;
}
.slider {
  margin-top: 110px;
}
.slide {
  transform-origin: 0px 36px;
  padding-left: 30%;
  position: absolute;
  display: flex;
  align-items: center;
  transform: rotate(0deg);
  transition: transform 0.5s ease;
  outline: 1px dotted;
}
.slide__content {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide__active .slide__content {
  opacity: 1;
}
.slide__num {
  flex-basis: 200px;
}
.buttons {
  position: relative;
}

JavaScript

let next = document.getElementById('next');
let slides = document.querySelectorAll('.slide');
let pos = -3;

function move(pos) {
	Array.prototype.forEach.call(slides, function(slide, num) {
  	slide.className = (pos + num) === 0 ? 'slide slide__active' : 'slide';
  	slide.style.transform = `rotate(${(num + pos) * 10}deg)`;
  });
}
move(pos);

next.addEventListener('click', function() {
	pos = Math.min(pos + 1, 0);
  move(pos);
});
prev.addEventListener('click', function() {
	pos = Math.max(pos - 1, -(slides.length - 1));
  move(pos);
});