JSFiddle - React, Tailwind, and code Playground

by UnsungHero97

HTML

<div id="wrapper" class="grid" >
    <div id="page_container">
        <div id="page_wrapper">
            
            <div id="info_box">
                <p>Sample Content</p>
            </div> <!-- End of Info_Box -->
        </div> <!-- End of page_wapper -->
    </div> <!-- End of page_container -->
</div> <!-- End of wrapper -->

CSS

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

body {
    background: #D0CDC5 url("http://i.imgur.com/5KpR9.jpg") center top repeat;
    background-repeat-x: repeat;
    background-repeat-y: repeat;
    background-attachment: initial;
    background-position-x: 50%;
    background-position-y: 0%;
    background-origin: initial;
    background-clip: initial;
    background-color: #D0CDC5;
    color: #333;
    height:100%;
}

html {
    height:100%;
}

#page_container {
    height:100%;
}

#page_wrapper {
    
}

#info_box {
    background-color: rgba(40,40,40,0.5);
    border: rgba(34,34,34,0.9) 1px solid;
    width: 350px;
    padding-right: 10px;
    vertical-align: middle;
    margin: 15px 0px 15px 20px;
    position: fixed;
    left: 35px;
    top: 15px;
    right: 0px;
    bottom: 15px;
}

#info_box p {
    font-family: Helvetica;
    font-size: 40px;
    color: #76d4ff;
    top: 0px;
    padding: 0px;
    margin: 0px;
}