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>
<label id="currentSelected">2</label>
<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 after">Item 4</div>
        <div id="rocksType_DB_5" class="rocksType_DBitem after">Item 5</div>
        <div id="rocksType_DB_6" class="rocksType_DBitem after">Item 6</div>
        <div id="rocksType_DB_7" class="rocksType_DBitem after">Item 7</div>
    </div>
</div> <!-- End of id="rocksMenu_subtypeSlider" -->

CSS

.rocksType_DBitem.current {
    border: 2px solid #000;
    background-color: #65FF5E;
    border-radius: 24px 24px 24px 24px;
}

.rocksType_DBitem.before {
    border: 1px solid #000;
    border-radius: 70px 24px 24px 24px;
}

.rocksType_DBitem.after {
    border: 1px solid #000;
    border-radius: 24px 24px 24px 70px;
}

#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) */
#rocksType_DBitem_beforeRockType {
  width: 253px; height: 99px;
  margin: auto;
  background-color: Aquamarine;
  position: absolute; top: 0px;
  -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) */
#rocksType_DBitem_currentRockType...

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_DBitem').removeClass('current');
        $('.rocksType_DBitem').removeClass('before');
        $('.rocksType_DBitem').removeClass('after');
        var middleRock = rocksType_place;
        rocksType_place--;           
        $('#rocksType_DBitems_container :eq(' + middleRock + ')').addClass('current');
        $('.current').prevAll().addClass('before');
        $('.current').nextAll().addClass('after');
        $('#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'},...