JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hotel1">hotel1</div>
<div class="hotel2">hotel2</div>
<div class="hotel3">hotel3</div>
<div class="logo-masq">logo-masq</div>
<div class="logo-hsn">logo-hsn</div>
<div class="logo-bnb">logo-bnb</div>

CSS

.hotel1, .hotel2, .hotel3 {
  height: 0px;
  opacity: 0;
  transition: all .4s
}
.logo-masq, .logo-hsn, .logo-bnb {
  opacity: 0;
  transition: opacity .2s
}

JavaScript

var items = [
  {selector: '.hotel1', style: {height: '100%', opacity: 1}},
  {selector: '.hotel2', style: {height: '100%', opacity: 1}},
  {selector: '.hotel3', style: {height: '100%', opacity: 1}},
  {selector: '.logo-masq', style: {opacity: '1'}},
  {selector: '.logo-hsn', style: {opacity: '1'}},
  {selector: '.logo-bnb', style: {opacity: '1'}}
];
var delay = 500;

setTimeout(function() {
  items.forEach(function(item, index) {
    setTimeout(function(){
      let el = document.querySelector(item.selector);
      Object.assign(el.style, item.style);
    }, delay * index)
  })
}, delay);