JSFiddle - React, Tailwind, and code Playground

by Valentin Sarychev

HTML

<div class="fake-body">
    <main>
        <div class="map">map</div>
    </main>
    <div class="footer">footer</div>
</div>

CSS

.map {
    background: green;
    height: 300px;
}

.fake-body {
    position: relative;
    width: 500px;
    margin: 0 auto;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: rgba(255, 255, 255, 0.7);
}