JSFiddle - React, Tailwind, and code Playground

by Baumr

HTML

<body>
    <div id="container">
        <div id="nav">
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
            <a href="#">Link</a>
        </div>
        <div id="content">
            <div id="callout">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae mollis dui. Praesent porttitor quam lorem. Phasellus ullamcorper ligula vitae augue eleifend faucibus. Donec elementum nulla eu erat feugiat nec bibendum purus facilisis. Vestibulum tincidunt, lectus sed tristique condimentum, odio justo faucibus diam, sed imperdiet metus dui non augue. Ut felis enim, accumsan id tempor vitae, rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada. Duis sodales ultricies congue. Maecenas id diam neque. Fusce ac interdum felis. Donec dictum massa eu enim aliquam rhoncus. Donec in dui diam. Aenean nisl risus, iaculis in convallis eu, condimentum a metus. Fusce ut purus odio. Curabitur vitae enim id nisl dignissim varius vitae vel dui. Aenean scelerisque ante vitae quam tempor non dignissim mauris venenatis.</p>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis posuere condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vitae mollis dui. Praesent porttitor quam lorem. Phasellus ullamcorper ligula vitae augue eleifend faucibus. Donec elementum nulla eu erat feugiat nec bibendum purus facilisis. Vestibulum tincidunt, lectus sed tristique condimentum, odio justo faucibus diam, sed imperdiet metus dui non augue. Ut felis enim, accumsan id tempor vitae, rutrum ut sem. Maecenas pulvinar bibendum lectus vel malesuada. Duis sodales ultricies congue. Maecenas id diam neque. Fusce ac interdum felis. Donec dictum...

CSS

#content { 
            position: staic; /* CHANGED FROM position: relative; */
            padding: 20px 250px 60px 20px;
            background: #fff;
        }



/* Rest of CSS */



body { 
            margin: 0;
            font: normal 12px/18px 'Helvetica', Arial, sans-serif;
            background: #44accf;
        }
        /* Positioning Rules */
        #container { 
            width: 900px;
            margin: 0 auto;
        }
        
        #nav { 
            height: 50px;
            background: #b7d84b;
        }
        #callout { 
            position: absolute;
            top: 100px;
            bottom: 100px;
            right: -80px;
            width: 210px;
            padding: 0 20px;
            border-top: 5px solid #f95b34;
            background: #fa8366;
        }
        #footer { 
            position: fixed;
            bottom: 0;
            width: 860px;
            padding: 0 20px;
            background: #f36283;
        }
        
        /* Stylistic Rules */
        #nav a {
            display: block;
            float: left;
            color: #fff;
            text-decoration: none;
            padding: 0 20px;
            line-height: 50px;
            border-right: 1px solid #91ab3b;
        }
        #nav a:hover {
            background: #91ab3b;
        }
        #callout p {
            color: #fff;
        }