JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<div class="menu">

    <div class="bar_outer">
        <div class="bar_inner"></div>
    </div>

    <div class="dropdown_outer">
        <div class="dropdown_inner">
            <div class="nav_box__nav__staggering_item">Item 1</div>
            <div class="nav_box__nav__staggering_item">Item 2</div>
            <div class="nav_box__nav__staggering_item">Item 3</div>
            <div class="nav_box__nav__staggering_item">Item 4</div>
        </div>
    </div>


</div>



<div class="nav_box">


	<div class="nav_box__top_bar">
		<div class="nav_box__top_bar_core">
			<img class="nav_box__logo logo" src="img/logo.png" alt="">

			<div class="nav_box__toggle_dropdown_btn fas">
			</div>
		</div>
	</div>



	<div class="nav_box__dropdown">
		<div class="nav_box__dropdown_core">
			<div class="nav_box__nav">
				<div class="nav_box__nav_item nav_box__nav__staggering_item">
					<a href="#especialidades" class="nav_box__nav_link t-link">
						O que tratamos
					</a>
				</div>
				<div class="nav_box__nav_item nav_box__nav__staggering_item">
					<a href="sobre.html" class="nav_box__nav_link t-link">
						Mais sobre nós
					</a>
				</div>
				<div class="nav_box__nav_item nav_box__nav__staggering_item">
					<a href="contactos.html" class="nav_box__nav_link t-link">
						Contactos e mapa
					</a>
				</div>
			</div>


			<div class="nav_box__phone_num_row nav_box__nav__staggering_item">

				<a class="nav_box__phone_num_btn cta_btn btn">+351 913 ... Ver número</a>

			</div>

			<div class="nav_box__address_row nav_box__nav__staggering_item">
				<div class="nav_box__address">
					Rua António Gomes Soares Pereira 96<br> 4470-139 MAIA<br> Porto
				</div>

				<div class="nav_box__open_address_in_google_link_row">
					<a href="" class="nav_box__open_address_in_google_link t-link">Abrir no Google Maps</a>
				</div>
			</div>

		</div> <!--...

CSS

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

html,
body {
    height: 100%;
}

.menu {
    background-color: #444;
}

.bar_outer,
.dropdown_outer {
    transition: .3s;
}

.bar_outer.is-squeeze,
.dropdown_outer {
    padding: 0 2em;
}

.bar_outer {}

.bar_inner {
    height: 3em;
    background-color: #eee;
}

.dropdown_outer {
    overflow: hidden;
    height: 0;
}

.dropdown_inner {
    background-color: #eee;
    padding: 5em 0;
}

.nav_box__nav__staggering_item {
    transition: .2s;
    opacity: 0;
    transform: translateY(-10px);
}

.nav_box__nav__staggering_item.is-stagger {
    opacity: 1;
    transform: translateY(0px);
}







/* is base */

.nav_box {
  border-radius: 3px;
  margin-top: 9%;
}

.nav_box__top_bar {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    -ms-align-items: center;
    align-items: center;
    padding: 1.5em 0;
}


.nav_box__toggle_dropdown_btn {
    position: relative;
    color: #ffffffcc;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50px;
    transition: .3s;
    cursor: pointer;
}

/* surrounding circle */
.nav_box__toggle_dropdown_btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 2px solid #ffffff38;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: .15s;

}

.nav_box__toggle_dropdown_btn:hover:before {
    transform: scale(1.1);
    transform-origin: center;
}


/* icons */
.nav_box__toggle_dropdown_btn:after {
  content: "\f0c9";
  display: block;
  transform: rotateZ(0deg);
  transition: .15s;
}

/*html*/.is-nav_open .nav_box__toggle_dropdown_btn:after {
    content: "\f068";
    transform: rotateZ(180deg);
}




.nav_box__dropdown {
      overflow: hidden;
    height: 0;
    transition: .3s;
  border-top: 1px solid transparent;
 ...

JavaScript

var w = window,
    d = document,
    $html = d.documentElement,
    $body = d.body,
    qs = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelector(arg2);
        }

        return d.querySelector(arg1);
    },
    qsa = function(arg1, arg2) {
        if (arg2) {
            return (arg1).querySelectorAll(arg2);
        }

        return d.querySelectorAll(arg1);
    },
    ael = function($el, evt, cb, uc) {
        if (!$el || !evt || !cb) return;

        if ($el !== w && $el.length) {
            $el.forEach(function($el) {
                $el.addEventListener(evt, cb, uc);
            });

            return true;
        }

        return $el.addEventListener(evt, cb, uc);
    },

    ael1 = function($el, evt, cb, uc) {
        var cb_ = function(e) {
            cb(e);
            $el.removeEventListener(evt, cb_);
        };

        return ael($el, evt, cb_, uc);
    },


    transition_end_event = (function() {
        var t,
            el = document.createElement("fakeelement");

        var transitions = {
            "transition": "transitionend",
            "OTransition": "oTransitionEnd",
            "MozTransition": "transitionend",
            "WebkitTransition": "webkitTransitionEnd"
        }

        for (t in transitions) {
            if (el.style[t] !== undefined) {
                return transitions[t];
            }
        }
    })(),

    oneTransitionEnd = function($el, cb, uc) {
        function cb_(e) {
            if (e.target !== e.currentTarget) return;
            cb();
            $el.removeEventListener(transition_end_event, cb_);
        }

        ael($el, transition_end_event, cb_, uc);
    },

    forceRedraw = function() {
        $html.offsetWidth;
    };





var menu = qs('.menu'),
    bar_outer = qs('.bar_outer'),
    bar_inner = qs('.bar_inner'),
    dropdown_outer = qs('.dropdown_outer'),
    dropdown_inner = qs('.dropdown_inner'),
    nav_box__nav__staggering_itemS =...