JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<header>
     <h1 id="head">Title</h1>

     <h3 id="sub-head">Sub-title</h3>
 <span id="head-nav"><button>login</button></span>

</header>

CSS

header {
    margin:0 auto;
    text-align:center;
}
h1 {
    font-size:4em;

}
h3 {
    font-size:1.8em;
    display:none;
}
header span {
}

JavaScript

var head = $("#head");
var subhHead = $("#sub-head");
head
.hide()
.slideDown({
    duration: 1000,
    easing: "linear",
    complete: function () {
        subhHead.hide()
        .slideDown({
            duration:1000, 
            easing:"linear"
        });
    }
});