JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blog</title>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" id="styles" href="style/style.css" media="screen">
</head>
<body>
    <div id="top-container">
        <div class="shine-top"></div>
        <div class="top-wrap">
            <!-- header -->
            <header>
                <div class="logo-menu">
                    <ul class="navmenu">
                        <li>
                            <a class="drop" href="services.html">Services</a>
                            <ul>
                                <li><a href="testimonials.html">Testimonials1</a></li>
                                <li><a href="testimonials.html">Testimonials2</a></li>
                                <li><a href="testimonials.html">Testimonials3</a></li>
                                <li><a href="testimonials.html">Testimonials4</a></li>
                                <li><a href="testimonials.html">Testimonials5</a></li>
                                <li><a href="testimonials.html">Testimonials6</a></li>
                                <li><a href="testimonials.html">Testimonials7</a></li>
                            </ul>
                        </li>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>


                    </ul>
                </div>

                <div class="inner-pages-slider">
                    <div id="head" class="nivoSlider">
                        nivoSlider-nivoSlider-nivoSlider-nivoSlider-nivoSlider
                    </div>
                </div>
            </header>
        </div>
        <div class="bottom-mask">
            <p>bottom-mask - Этот текст находится поверх списка, в то время, как он должен находиться снизу. <strong>Z-index=500</strong></p>
        </div>
    </div>
    <!-- content -->
    <section id="content">
        <div class="inner">
           ...

CSS

header,content,footer {
    clear:both;
    display:block
}

input,textarea {
    outline:none
}

body {
    background-color:red;
    font-size:13px;
    color:black;
    font-family:'PT Sans',sans-serif;
    min-height:100%;
    height:auto!important;
    height:100%
}

html,body {
    width:100%;
    min-width:480px
}



/*-------------------- START HEADER AND FOOTER BACKGROUND -------------------*/
#top-container {
    background: green
}

#footer-wrap {
    background: yellow 
}

/*-------------------- END HEADER AND FOOTER BACKGROUND ---------------------*/
a.visited,a,.portfolio-pagn span a.page-active,.portfolio-pagn span a:hover {
    color:green;
    text-decoration:none
}

p {
    line-height:1.6em;
    margin-bottom:7px
}

h1,h2,h3,h4,h5,h6,.heading a,.post-mod h6 a,.descr a,.mini-menu span.phone,.post p.auth-cat,.tweet_text a:hover,.post p span strong a,a.clr-link:hover {
    color:#202020
}



/*--------------------------- 1 - END DOCUMENT SETUP, COMMON CLASSES ------*/
/*--------------------------- 2 - START HOME PAGE STYLES ------------------*/
#top-container {
    width:100%;
    position:relative;
    overflow:visible
}

.shine-top {
    position:absolute;
    top:0;
    left:0;
    height:634px;
    width:100%;
    min-width:480px;
}

.bottom-mask {
    position:absolute;
    bottom:0;
    height:45px;
    width:100%;
    min-width:480px;
    z-index:20;
    border: 1px green solid;
    background:url(../images/bottom-mask.png) no-repeat 50% 0
}

.top-wrap,#content {
    position:relative;
    z-index:2;
    width:480px;
    margin:0 auto;
    overflow:visible
}

.top-info {
    padding:16px 20px;
    font-size:12px
}



/*--------------------------- 2-1 - START LOGO AND NAV --------------------*/
.logo-menu {
    z-index:22;
    height:111px;
    background:#fff;
    position:relative
}

.logo {
    position:absolute;
    height:40px;
    display:block;
    bottom:37px;
    left:34px
}

ul.navmenu {
    position:absolute;
    list-style:none;
...