JSFiddle - React, Tailwind, and code Playground

by R3oLoN

HTML

<div>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
    <h3>Conteúdo</h3>
</div>
<footer id="rodape" data-show='true'>
    rodapé
    <a id="toggle"><</a>
</footer>

CSS

#rodape{
	background-color: #fff;
	border: 1px #000 solid;
	width: 100%;
	height: 30px;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
}

#toggle{
    height: 30px;
	width: 30px;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #fff;
	border: 1px #000 solid;
	z-index: 1100;
    text-align: center;
}

JavaScript

$('#toggle').on('click', function(){
    var rodape = $('#rodape');
    var isShow = $(rodape).data('show') === 'true';
    console.log(isShow);
    rodape.animate({left: (isShow ? '100%': '0')}, 500);
    rodape.data('show', !isShow);
});