JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/14193826/jquery.animate-colors.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14193826/jquery.animate.clip.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14193826/jquery.backgroundPosition.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14193826/jquery.easing.1.3.js"></script>
<div id="rocksType_btns">
    <div id="rocksType_btnUp"></div>
    <div id="rocksType_btnDown"></div>
</div>

<div id="rocksType_subtypeSlider">
    <div id="rocksType_DBitems_container">
        <div id="rocksType_DB_1" class="rocksType_DBitem before">Item 1</div>
        <div id="rocksType_DB_2" class="rocksType_DBitem current">Item 2</div>
        <div id="rocksType_DB_3" class="rocksType_DBitem after">Item 3</div>
        <div id="rocksType_DB_4" class="rocksType_DBitem">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

CSS

#rocksType_btns {
  z-index: 1;
  width: 22px; height: 25px;
  margin: auto;
  position: absolute; top: 0%; bottom: 0%;
}

#rocksType_btnUp {
  background-image: url(https://dl.dropboxusercontent.com/u/14193826/text_scrollBtnUp.png); background-repeat: no-repeat;
  width: 22px; height: 10px;
  position: absolute; top: 0px;
  cursor: pointer;
}

#rocksType_btnDown {
  background-image: url(https://dl.dropboxusercontent.com/u/14193826/text_scrollBtnDown.png); background-repeat: no-repeat;
  width: 22px; height: 10px;
  position: absolute; bottom: 0px;
  cursor: pointer;
}

#rocksType_subtypeSlider {
/*background-color: green; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; /* Layout reference only - comment once ready */
  width: 253px; height: 323px;
  text-align: center;
  border: 1px solid #000000;
  margin: auto;
  position: absolute; left: 45px; top: 0%; bottom: 0%;
  overflow: hidden;
}

#rocksType_DBitems_container {
  position: absolute; top: 0px;
}

.rocksType_DBitem {
  width: 253px; height: 99px;
  margin: auto; margin-bottom: 13px;
  background-color: #CCFFFF;
  position: relative;
  -webkit-border-radius: 24px 24px 24px 24px; 
  -moz-border-radius: 24px 24px 24px 24px; 
  border-radius: 24px 24px 24px 24px;
}

/* CSS styling for the 1st visible item (before) */
.before {
  background-color: Aquamarine;
  -webkit-border-radius: 70px 24px 24px 24px; 
    -moz-border-radius: 70px 24px 24px 24px;       
    border-radius: 70px 24px 24px 24px;
}

/* CSS styling for the 2nd visible item (current) */
.current {
  background-color: Aqua;
  border: 4px solid #000000; 
    -webkit-border-radius: 24px 24px 24px 24px; 
    -moz-border-radius: 24px 24px 24px 24px; 
    border-radius: 24px 24px 24px 24px;
}

/* CSS styling for the 3rd visible item (after) */
.after {
  background-color: Aquamarine;
  -webkit-border-radius: 24px 24px 24px 70px; 
    -moz-border-radius: 24px 24px 24px 70px; 
    border-radius: 24px 24px 24px 70px;

JavaScript

// Defining some variables for the sliding up/down buttons //////////////////////////////////
var rocksType_place = 0;
var rocksType_position = 0;
var rocksType_limit = parseInt($('div .rocksType_DBitem').length) - 3;

// Rock type slide UP button mouse events ///////////////////////////////////////////////////

$('#rocksType_btnUp').on('mouseenter', function(){
    $(this).animate({'background-position-y':'-10px'}, 150);
});

$('#rocksType_btnUp').on('mouseleave', function(){
    $(this).stop(true).animate({'background-position-y':'0px'}, 150);
});

$('#rocksType_btnUp').on('click', function(){
  $(this).animate({'background-position-y':'-20px'}, 150,
    function(){
      $(this).animate({'background-position-y':'-10px'}, 150);
      // Slide all databaseContent_? up by -99px
      if(rocksType_place > 0){
          rocksType_shift('prev');
        rocksType_place--;
        $('#rocksType_selectBtnState').animate({'width':'75%', 'height':'75%'}, 100);
        $('#rocksType_selectBtn').animate({'opacity':'0'}, 250, 'easeOutCirc',
          function(){
            $(this).animate({'opacity':'1'}, 500);
            $("#rocksType_selectBtnState").animate({'width':'100%', 'height':'100%'}, 100);
          }
        );
      }
      rocksType_animateSliding();
    }
  );
});

// Rock type slide DOWN button mouse events ///////////////////////////////////////////////////

$('#rocksType_btnDown').on('mouseenter', function(){
    $(this).animate({'background-position-y':'-10px'}, 150);
});

$('#rocksType_btnDown').on('mouseleave', function(){
    $(this).stop(true).animate({'background-position-y':'0px'}, 150);
});

$('#rocksType_btnDown').on('click', function(){
  $(this).animate({'background-position-y':'-20px'}, 150,
    function(){
      $(this).animate({'background-position-y':'-10px'}, 150);
      // Slide all databaseContent_? up by 99px
      if(rocksType_place < rocksType_limit){
          rocksType_shift('next');
        rocksType_place++;
       ...