JSFiddle - React, Tailwind, and code Playground

by Sergey Denisov

HTML

<body>
    Lorem ipsum ipsum ipsum.
    <div class="bottom-warning">This site requires an HTML rendering engine!</div>
</body>

CSS

body, html {
    margin: 0;
    padding: 0;
}

.bottom-warning {
    background-color: lightblue;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 20px;
    position: fixed;
    width: 100%;
    transition: bottom 1s;
}

JavaScript

var $warning = $('.bottom-warning');
var height = $warning.outerHeight();

$warning.css('bottom', -height);
$warning.css('display', 'inline-block');

setTimeout(function() {
    $warning.css('bottom', 0);
}, 0);