JSFiddle - React, Tailwind, and code Playground

by schwiegler

HTML

<header>
    <div class="container-fluid login-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10">
            <a href="#" id="regislink">Register</a>
        </div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid register-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eros odio, finibus nec facilisis quis, imperdiet vitae orci. Sed rutrum elit ut metus posuere efficitur. In faucibus nisl dui, sed rutrum tellus posuere sed. Duis in ipsum eleifend enim ultricies maximus. Sed nunc nulla, tincidunt finibus eros id, accumsan molestie augue. Proin non interdum sapien. Praesent tincidunt consectetur ex accumsan fermentum. Sed tristique lorem quis magna ullamcorper, vel luctus odio tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nunc eu sapien vitae eros pulvinar dignissim sit amet eget est. Suspendisse mattis fermentum turpis, id pellentesque augue tempus id. Nullam dolor ligula, lacinia in dictum vel, viverra eu urna. Phasellus ac mattis ligula, non volutpat nunc. Nulla tellus dolor, luctus ut lobortis in, porttitor sit amet justo. Nulla lacinia lorem sed mauris efficitur, ac mollis ante fringilla. Etiam nec eros viverra, rhoncus massa vel, facilisis augue. Sed ac dolor lorem. Mauris ac lacus nunc. Proin gravida lacus tortor, et ornare nisl semper quis. Fusce gravida tellus at tortor sagittis, sit amet tempus dolor ornare. Duis et vulputate augue. Nam ut porttitor nunc, eget porttitor augue.

Cras feugiat imperdiet venenatis. Sed vestibulum libero ut mi feugiat venenatis. Nulla auctor sem volutpat, semper neque id, interdum ante. Ut commodo ultricies sapien sit amet facilisis. Suspendisse mattis rhoncus tortor, eu congue dolor tempus non. Maecenas viverra rhoncus bibendum. Nam ut mollis lorem. Vivamus eget nisi in quam vestibulum rutrum. Suspendisse nec tortor...

CSS

.login-div,
.register-div {
    z-index:1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    background:#dbdfe2;
    color:#515151;
    padding: 0;
    height: 0px;
    overflow: hidden;
}

.login-div.active {
    padding:37px;
}

.register-div.active {
    padding:15px;
    position:relative;
    height:100%;
}

JavaScript

$('#loginlink').on('click',function() {
    $('.login-div').toggleClass('active');
    $('.register-div').removeClass('active');
});

$('#regislink').on('click',function() {
    $('.login-div').removeClass('active');
    $('.register-div').toggleClass('active');
});