JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
<div id="wrapper">

    <div id="main">
    text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br></div>

<div id="footer">
    <div class="footer-wrap">
    <section class="sec1">
        <ul>
            <li>Client Name</li>
            <br>
            <li>Brand Manual</li>
        </ul>
    </section>
    
    <section class="sec2">
        <ul>
            <li>Company</li>
            <br>
            <li>About</li>
            <li>Careers</li>
            <li>Press</li>
            <li>Blog</li>
            <li>Help</li>
            <li>Policies</li>
            <li>Disaster Response</li>
            <li>Terms & Privacy</li>
        </ul>
    </section>

    <section class="sec3">
        <ul>
            <li>Discover</li>
            <br>
            <li>Trust & Safety</li>
            <li>Invite Friends</li>
            <li>Gift Cards</li>
            <li>Airbnb Picks</li>
            <li>Mobile</li>
            <li>Support NYC</li>
            <li>Business Travel</li>
            <li>Site Map</li>
        </ul>
    </section>
</div>
</div>
   
    
    
    
    
    
    
    
    
    
    
    
    
    
</div>
</body>

CSS

body { font-family: helvetica; }
#wrapper { min-height: 100%; position: relative; }
#main { padding-bottom: 400px; /* Footer Height */ }
#footer { position: absolute; width: 100%; clear: both; bottom: 0; padding: 0; margin: 0; height: 400px; /* Main Padding Bottom */ color:#ffffff; background: #333; }
#footer ul { color: white; margin: 0; padding: 0; font-size: 0.9em; letter-spacing: 1px; line-height: 1.3em; list-style: none; }
#footer li { flaot:left; }
#footer section { float:left; padding-top:100px; }
#footer section.sec1 { width:50%; }
#footer section.sec2 { width:25%; }
#footer section.sec3 { width:25%; }
#footer .footer-wrap { margin:0 auto; position: relative; max-width: 98%; }