JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<div class="l-page">
        <div class="l-page-h">

            <!-- header -->
            <div class="b-header skin_default">
                <div class="b-header-h g-clearfix">
                    
                </div>
            </div>
            <!-- End header -->

            <!-- page container -->
            <div class="page-container g-clearfix">
                asdfasdfsadfsadf
            </div>
            <!-- End page container -->
            <div class="l-footer">
                <div class="b-footer">
                    <div class="b-footer-h">
                        footer
                    </div>
                </div>
            </div>

        </div>

    </div>

CSS

html,
body {
    height: 100%;
    cursor: default;
    margin: 0;
    }
html {
    overflow-x: auto;
    overflow-y: scroll;
    }
/* page */
.l-page {
    display: table;
    width: 100%;
    height: 100%;
    position: relative;
    }


/* page-container */
.page-container {
    margin: 45px auto 100px auto;
    padding: 0 20px;
    width: 100%;
    position: relative;
    z-index: 5;
    }

/* l-footer */
.l-footer {
    margin-top: -100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #ccc;
    }