JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/14193826/centerSite_in_browserWindow.js"></script>
<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 class="rocksType_btns">
    <div class="rocksType_btnUp"></div>
    <div class="rocksType_btnDown"></div>
</div>

<!-- Type slider ├───────────────────────────────────────────────────────────────────────────────────┤ -->

<div class="rocksType_subtypeSlider">

        <div class="rocksType_DBitems_container">
          
          <div id="rocksType_DB_1" class="rocksType_DBitem rocksType_DBitem_before">
            <p>
              <span class="rocksType_title">Mármore</span>
              <br/>
              <span class="rocksType_subtitle">Azul Lagoa</span>
            </p>
            <img class="rocksType_image" src="" alt="" />
          </div> <!-- ... to be created dynamically by PHP -->

          <div id="rocksType_DB_2" class="rocksType_DBitem rocksType_DBitem_current">
            <p>
              <span class="rocksType_title">Mármore</span>
              <br/>
              <span class="rocksType_subtitle">Branco</span>
            </p>
            <img class="rocksType_image" src="" alt="" />
          </div> <!-- ... to be created dynamically by PHP -->

          <div id="rocksType_DB_3" class="rocksType_DBitem rocksType_DBitem_after">
            <p>
              <span class="rocksType_title">Mármore</span>
              <br/>
              <span class="rocksType_subtitle">Branco Lagoa</span>
            </p>
            <img class="rocksType_image" src="" alt="" />
          </div> <!-- ... to be created dynamically by PHP -->

          <div id="rocksType_DB_4"...

CSS

/* Google fonts */
@import url(http://fonts.googleapis.com/css?family=Exo:400,700);
@import url(http://fonts.googleapis.com/css?family=Economica:400,400italic,700,700italic);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic);

.rocksType_btns {
  z-index: 1;
  width: 22px; height: 25px;
  margin: auto; margin-left: 20px;
  position: absolute; left: -10px; 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;
}

/* Rocks type | Subtype slider ──────────────────── */

.rocksType_subtypeSlider {
  background-color: green; /* Layout reference only - comment once ready */
  width: 126px; height: 337px;
  margin: auto; margin-left: 20px; margin-top: 15px;
  position: absolute; left: 22px; top: -5px;
  overflow: hidden;
}

.rocksType_DBitems_container {
/*background-color: orange; /* Layout reference only - comment once ready */
  position: absolute;
  text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; /* Distribute evenly */
}

.rocksType_DBitems_container > div.highlighted {
  cursor: default;
}

/* Rocks type | database  ─────────────────────────── */

/* Generic format for the database Content divs - testing only */
.rocksType_DBitem {
  width: 106px; height: 99px;
  margin: auto; margin-top: 5.2%; margin-bottom: 5.2%;
  background-color: Aquamarine; /* Layout reference only - comment once ready */
  position: relative; left: 4%; right: 4%;
  -webkit-border-radius: 24px 24px 24px 24px; -moz-border-radius: 24px 24px 24px 24px; border-radius: 24px 24px 24px...

JavaScript

// Rock type sliding menu ├────────────────────────────────────────────────────────────────────────────────┤

  // 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(){
    if (rocksType_place === 0){
      return;
    }
    $(this).animate({'background-position-y':'-10px'}, 150, 'swing');
  });

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

  $('.rocksType_btnUp').on('click', function(){
    if (rocksType_place === 0){
      return;
    }
    $(this).animate({'background-position-y':'-20px'}, 150, 'swing',
      function(){
        $(this).animate({'background-position-y':'-10px'}, 150, 'swing');
        // Slide all databaseContent_? up by -99px
        if(rocksType_place > 0){
          rocksType_place--;
          rocksType_shift('prev');
        }
        rocksType_animateSliding();
      }
    );
  });

  // Rock type slide DOWN button mouse events

  $('.rocksType_btnDown').on('mouseenter', function(){
    if (rocksType_place >= rocksType_limit){
      return;
    }
    $(this).animate({'background-position-y':'-10px'}, 150, 'swing');
  });

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

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