JSFiddle - React, Tailwind, and code Playground

by bgmort

HTML

<div id="page-wrapper">        
        <header id="fixed-pane">
            <div id="menu-tray" style="display: none;" class="clear">
                <div id="user-detail" class="clear">
                    <a href="{$full_path_normal}profile/{$userName}/" class="member"><img src="{usericon_url id=$user size=64}" width="64" height="64"/>{$userName}</a>
                </div>
                <ul class="member-menu clear">
                    <li><a href="{$full_path_normal}account/" class="btn2">Account</a></li>
                    <li><a href="{$full_path_normal}gallery/" class="btn2">Gallery</a></li>
                    <li><a href="{$full_path_normal}editwatchlist.php" class="btn2">Watches</a></li>
                    <li><a href="{$full_path_normal}pages_all_recent/{$userName}" class="btn2">Memorial Pages</a></li>
                </ul>
            </div>

            <div id="mast" class="clear">
                <a href="/" class="home">Home</a>  
                <a href="/" title="Return to Home" id="fn-logo" class="ir">Fold3</a>     
                         
                <span class="nav-signin">
                    <a href="{$full_path_secure}signon.php"><strong>Sign in</strong></a> or <a href="{$full_path_secure}choose-a-plan/"><strong>Join</strong></a>
                </span>
            </div>
            </header>

        <div id="content-pane" class="clear">
            <p>Hi, I'm content (first row)</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content</p>
            <p>Hi, I'm content (last row)</p>
        </div>

...

CSS

/*
html, body {
    width: 100%; height: 100%; margin: 0; padding: 0;
}
*/
@media only screen and (max-width: 1280px)  {
    /* footer color */
    html, body{
        background: #2D2214;
    }
    header{
        padding: .5em;
        position: fixed;
        background: red;
        width: 100%;
    }
    #content-pane {
        padding: 2.5em .5em .5em .5em;
    }
}
@media only screen and (min-width: 1281px)  {
    html, body{
        background: #eee;
    }
    #page-wrapper{
        width:1280px;
        margin: 0px auto;
    }
    #content-pane {
        padding: .5em;
    }
}
#page-wrapper{
    background: #fff;   
}
footer{
    padding: 1em;
    background: #2D2214;
    color: white;
}
footer a, footer a:hover{
    color: white;
}