JSFiddle - React, Tailwind, and code Playground

HTML

<button id="click_btn_one" onclick="drop()">Click here</button>

<div id="divSeven" data-dropdown class='fade'>This is div seven</div>
<div id="divSix" data-dropdown class='fade'>This is div six</div>
<div id="divFive" data-dropdown class='fade'>This is div five</div>
<div id="divFour" data-dropdown class='fade'>This is div four</div>
<div id="divThree" data-dropdown class='fade'>This is div three</div>
<div id="divTwo" data-dropdown class='fade'>This is div two</div>
<div id="divOne" data-dropdown class='fade'>This is div one</div>

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="click_btn_two" onclick="dropUp()">Click here</button>

CSS

#divSeven {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#000; color:#fff}    
#divSix {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#111; color:#fff}
#divFive {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#222; color:#fff}
#divFour {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#333; color:#fff}
#divThree {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#444; color:#fff}
#divTwo {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#555; color:#fff}
#divOne {position:absolute; top:-100px; left:0px; height:50px; width:200px; background:#666; color:#fff}

.fade {
  opacity: 0;
  transition: top 0.8s ease-in 0s, opacity 1s ease-in 0s;
}
.fade.in {
  opacity: 1;
}

JavaScript

function drop(){
  var elems = document.querySelectorAll('[data-dropdown]');
  console.log(elems);
  var offset = 50;
  for(var i = 0; i < elems.length; i++){
    elems[i].className = 'fade in';
    elems[i].style.top = (offset * i) + 'px';
  }
}

function dropUp(){
  var elems = document.querySelectorAll('[data-dropdown]');
  console.log(elems);
  var offset = 50;
  for(var i = 0; i < elems.length; i++){
    elems[i].className = 'fade in';
    elems[i].style.top = -100 + 'px';
  }
}
/*


function dropSeven(el) {
var seven = document.getElementById(el);
seven.style.top = "350px"
}

function dropSix(el) {
var six = document.getElementById(el);
six.style.top = "300px"
}

function dropFive(el) {
var five = document.getElementById(el);
five.style.top = "250px"
}

function dropFour(el) {
var four = document.getElementById(el);
four.style.top = "200px"
}

function dropThree(el) {
var three = document.getElementById(el);
three.style.top = "150px"
}

function dropTwo(el) {
var two = document.getElementById(el);
two.style.top = "100px";
}

function dropOne(el) {
var one = document.getElementById(el);
one.style.top = "50px"
}*/