JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open regionsButton">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState" class="regionsContent">
        <div id="chooseStateUnitedStatesColumnOne">
                <div id="chooseStateUnitedStatesScrollUp"></div>
                    <div id="chooseStateAlabama1" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama2" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama3" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama4" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama5" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama6" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama7" class="not-open regionsButton"></div>
                <div id="chooseStateUnitedStatesScrollDown"></div>
        </div>
    </div>
</div>

CSS

#sidemenu {
	width: 60px;
    height:100%;
	min-width: 60px;
	max-width: 60px;
	background-color: #383D3F;
	position: absolute;
	left: -60px;
	transition: left ease-in-out 0.5s;
	top: 0;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
	width: 60px;
	height: 100%;
	min-width: 60px;
	max-width: 60px;
	background-color: #383D3F;
	position: absolute;
	top:25%;
}
#regionsUnitedStates {
	width: 60px;
	height: 60px;
	background-color:#111111;
}
#regionsUnitedStatesTooltip {
	opacity:0;
	background-color:#000;
	height:60px;
	width:180px;
	left:100px;
	position:absolute;
	transition:all ease-in-out 0.25s;
	top:0;
	visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
	left: 60px;
	opacity:1;
	visibility:visible;
	}
#regionsUnitedStates:hover {
	background-position:bottom;
}
#regionsUnitedStatesChooseState{
	position:absolute;
	transition:all ease-in-out 0.25s;
	left: -150px;
    width: 150px;
    height: 100%;
    background: #505759;
	top:0;
	z-index:-1;
    overflow:auto;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
	z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
	width:150px;
	height:40px;
	background-color:#111111;
	top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
	background-position:bottom;	
	cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
	width:150px;
	height:40px;
	background-color:#111111;
	bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
	background-position:bottom;	
	cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
	width:100px;
	height:100%;
	float:left;	
	top:0%;
}
#chooseStateAlabama1 {
	width: 100px;
	height:100px;
	background-color:#888888;
	margin-left:25px;
	margin-top:10px;
}
#chooseStateAlabama2 {
	width: 100px;
	height:100px;
	background-color:#888888;
	margin-left:25px;
	margin-top:10px;
}
#chooseStateAlabama3 {
	width: 100px;
	height:100px;
	background-color:#888888;
	margin-left:25px;
	margin-top:10px;
}
#chooseStateAlabama4 {
	width:...

JavaScript

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});