JSFiddle - React, Tailwind, and code Playground

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'>
    roapédfddddddddgsgdfdddddddd<ul>
    <li>dsfsd</li>
    </ul>
    <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');
    console.log(isShow);
    rodape.animate({left: (isShow ? '100%': '0')}, 500, function(){
           $('#toggle').text(!isShow ? 'vnvbnv': '<')
    });
    rodape.data('show', !isShow);
});