JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">

<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">


</head>


<body>


    <div class="container">

        <div class="wrapper">

            <header>
                <div class="row">
                    <div class="align-middle py-3 text-white-50 text-center navbar">
                        header
                    </div>
                </div>
            </header>

            <br />

            <main>
                <div class="row">
                    BODY
                </div>
            </main>

        </div>

        <footer>
            <div class="row">
                <div class="align-middle py-3 text-white-50 text-center footer">
                    FOOTER
                </div>
            </div>
        </footer>

    </div>


</body>

</html>

CSS

body {
            background-color: #f0f0f0;
        }

        .navbar {
            background-color: #444;
            width: 100%;
        }

        .footer {
            background-color: #444;
            width: 100%;
            height: 50px;
        }

        html,
        body {
            height: 100%;
            margin: 0;
        }

        .wrapper {
            min-height: 100%;
            margin-bottom: -50px;
            padding: 0px 0px 80px 0px;
        }

        .push {
            height: 50px;
            z-index: -1;
        }