JSFiddle - React, Tailwind, and code Playground

by SpaceDog

HTML

<div class="slide-one">
    <h2>"Sourcing the <font color="#5bbb00">right</font> candidates for your <font color="#00abf4">organisation</font>..."</h2> 
</div>

<div class="slide-two">
    <form id="login-form">
        <div id="login-wrap">
            <input type="text" name="first_Name" placeholder="Username"><br>
            <input type="text" name="last_Name" placeholder="Password"><br>
            <input type="submit">
            <input type="submit">                            
        </div>
    </form>
    <a href="#" id="hide-div" class="show_hide">hide</a>
</div>

<a href="#" id="login" class="show_hide">Staff Login</a>

CSS

.slide-one {
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    height:125px;
}
.slide-two{
    position:absolute;
    width:100%;
    top:0px;
    left:0px;
    height:125px;
}
.show_hide {
    display:none;
}



#hide-div {
    margin-top:2em;
    padding:.5em;
    background:#ddd;
}
#login {
    position:fixed;
    top:125px;
    left:0;
    padding:.5em;
    background:#ddd;
}

JavaScript

$(document).ready(function () {

    $(".slide-one").show();
    $(".slide-two").hide();
    
    $(".show_hide").show();
   
    $('.show_hide').click(function () {
        $(".slide-one").slideToggle( 1000 );
    });
    $('.show_hide').click(function () {
        $(".slide-two").slideToggle( 1000 );
    });

});