JSFiddle - React, Tailwind, and code Playground

by Kalu Singh Rao

HTML

<body>
<div id="wrapper">
    <div id="header">
        <table width="100%" height="auto" border="0">
            <tr>
                <td><h1 id="logo"><a href="#">WEBSITE</a></h1></td>
                <td><div id="navigation">
                    <ul>
                        <a href="#"><li>HOME</li></a>
                        <a href="#"><li>FORUM</li></a>
                        <a href="#"><li>NEWS</li></a>
                        <a href="#"><li>INFORMATION</li></a>
                        <a href="#"><li>GALLERY</li></a>
                        <a href="#"><li>STAFF APPLICATIONS</li></a>
                        <a href="#"><li>CONTACT US</li></a>
                    </ul>
                </div></td></tr></table>
    </div>
    <div id="content">
        <div id="announcement">
            <center>
                <p><marquee>Latest News: WEBSITE IS STILL UNDER MAINTENANCE!</marquee></p>
            </center>
        </div>
        <div id="slider">
            <center>
                <h1>IMAGE SLIDER COMING SOON</h1>
            </center>
        </div>
        <div id="featured">
            <table width="100%" height="100%" border="0">
                <center>
                    <tr>
                        <!-- Column 1 -->
                        <td align="center" valign="top"><div id="thumbnail">
                            <img src="images/logo.png" alt="" title="1" width="100px" height="100px" />
                            <h3>Our Community, Your Community</h3>
                            <p>When you join our community, you are part of our community. We like outsiders that join us, because it means that we are getting <b>BIGGER</b>, and bigger is better! We are growing, gaining more members, more customers and more jobs are available! If you have not already joined us, then join us now!</p>
                            <a href="#">Register</a>
                        </div></td>
                        <!-- Column 2 -->
                       ...

CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:white;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:red;
    color:white;
}