JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wheelNav">
  <div class="shadow prev"></div>
  <div class="shadow next"></div>
  <div id="prev" class="wheelNav-item first prev">Saturday</div>
  <div id="active" class="wheelNav-item active">Sunday</div>
  <div id="next" class="wheelNav-item next">Monday</div>
 </div>

CSS

.wheelNav {
  position: relative;
  cursor: ns-resize;
  width: 134px;
  height: 192px;
  overflow: hidden;
  background: #ccc;
  border: 2px solid black;
}
.wheelNav-item {
  width: 134px;
  height: 64px;
  display: none;
  background: white;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  padding: 16px;
}
.wheelNav-item.active {
  display: block;
}
.wheelNav-item.prev, .wheelNav-item.next {
  display: block;
  -webkit-filter: blur(1px);
}
.wheelNav-item.last, .wheelNav-item.first {
  background: #ccc;
}
.wheelNav .shadow.prev {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 134px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav .shadow.next {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 134px;
  height: 64px;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav-item.up {
  animation-name: up;
  animation-duration: 0.5s;
}
.wheelNav-item.down {
  animation-name: down;
  animation-duration: 0.5s;
}
@keyframes up {
    from {margin-top: -5px;}
    to {margin-top: 0px;}
}
@keyframes down {
    from {margin-top: 5px;}
    to {margin-top: 0px;}
}

JavaScript

wheelNav = {
	scrolling: false,
  menu: document.getElementsByClassName("wheelNav")[0],
	items: document.getElementsByClassName("wheelNav-item"),
  next: function(prev,cur,next) {
    document.getElementById("active").innerHTML =cur;
    document.getElementById("next").innerHTML =next;
    document.getElementById("prev").innerHTML =prev;
    },
  initialize: function() {
  var itemArray=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  var maxIterationSize=itemArray.length-1;
  var currentArrayIndex=0;
  	wheelNav.menu.addEventListener("wheel", function(event) {
      var e = event;
      clearTimeout(wheelNav.scrolling);
      wheelNav.scrolling = setTimeout(function() { 
        e.defaultPrevented;
        var direction = e.deltaY;
   
        if (direction < 0) 
        {
          
          if(currentArrayIndex===1){
          currentArrayIndex=currentArrayIndex-1;
           wheelNav.next(itemArray[maxIterationSize],itemArray[currentArrayIndex],itemArray[1]);
           
        }
        else if(currentArrayIndex===0)
        {
           wheelNav.next(itemArray[maxIterationSize-1],itemArray[maxIterationSize],itemArray[0]);
           currentArrayIndex=maxIterationSize;
        }
        else
        {
          currentArrayIndex=currentArrayIndex-1;
          wheelNav.next(itemArray[currentArrayIndex-1],itemArray[currentArrayIndex],itemArray[currentArrayIndex+1]);
        }
         
        }
      
        if (direction > 0) 
        {
        
          if(currentArrayIndex===maxIterationSize-1){
          currentArrayIndex=currentArrayIndex+1;
           wheelNav.next(itemArray[maxIterationSize-1],itemArray[currentArrayIndex],itemArray[0]);
         }
          else if(currentArrayIndex===maxIterationSize)
         {
           wheelNav.next(itemArray[maxIterationSize],itemArray[0],itemArray[1]);
           currentArrayIndex=0;
         }
          else
         {
          currentArrayIndex=currentArrayIndex+1;
         ...