JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="drop-down js-drop-down">
    <div class="dd-selection dd-option">U.S.</div>
    <div class="dd-list">
        <a href="#0" class="dd-option">EMEA</a>
        <a href="#0" class="dd-option">APAC</a>
    </div>
</div>

CSS

.drop-down{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 140px;
}
.dd-selection{
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    background: #eee;
}
.dd-list{
    position: absolute;
    z-index: 1;
    display: none;
    width: 100%;
    overflow: hidden;
}
.dd-opening .dd-list{
    display: block;
}
.dd-option{   
    display: block;
    width: 100%;
    padding: 5px;
    background: #eee;
}
.dd-list .dd-option{
    opacity: 0;
    transition: opacity .3s;
}
.dd-opened .dd-list > .dd-option{
    opacity: 1;
}

JavaScript

var body = $("body");

dropDownBtn(".js-drop-down");

function dropDownBtn(btn){
	btn = $(btn);
	var btnStatus = false;

	btn.click(function(){

		if(btnStatus == false){
			return openDD();
		} else{
			return closeDD();
		}
	});
	
	// Open
	function openDD(){
		btn.addClass("dd-opening");
		setTimeout(function(){
			btn.addClass("dd-opened")
		}, 50);
		btnStatus = true;
	}

	// Close
	function closeDD(){
		btn.removeClass("dd-opened");
		setTimeout(function(){
			btn.removeClass("dd-opening")
		}, 400);
		btnStatus = false;
	}
}