JSFiddle - React, Tailwind, and code Playground

by SeasonEnds

HTML

<div id="header">
    This is a header
</div>

<nav id="left-navigation">
    <ul>
        <li><a href="">Navigation</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
    </ul>
</nav>

<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies non massa sit amet venenatis. Nullam ullamcorper sed dui ac venenatis. Fusce libero nisl, ornare ut pulvinar laoreet, rutrum sit amet ligula. Curabitur gravida interdum elementum. Fusce mollis est eget lobortis auctor. Praesent sed leo purus. Quisque aliquam, odio ut posuere ornare, est metus lacinia mi, quis viverra turpis nunc a mauris. Nunc venenatis consectetur lectus non dictum. Morbi accumsan porta accumsan. Nam posuere eget leo sed iaculis. Donec vitae felis sed ipsum dapibus rutrum non nec dui.</p>

<p>Donec tempus faucibus ligula, dictum accumsan leo viverra quis. Sed metus odio, gravida id adipiscing non, auctor et arcu. Etiam vehicula erat luctus, ullamcorper risus ac, tempus massa. Duis bibendum leo ac feugiat laoreet. Sed et arcu a urna tristique vehicula vitae dictum justo. Curabitur egestas gravida massa, vel convallis augue varius et. Phasellus elementum lorem non augue pharetra, quis adipiscing odio commodo. Pellentesque mi odio, tincidunt et felis ut, euismod tristique libero. Nam tempus condimentum urna ac venenatis. Nullam mauris justo, luctus in aliquam id, dapibus vitae est. Ut dignissim rhoncus sapien, at pellentesque arcu ultricies ut. Ut ornare rutrum semper. Vestibulum tincidunt orci tortor, in volutpat odio vehicula ut. Donec dui eros, blandit ac venenatis vel, molestie id dolor.</p>

<p>Praesent venenatis massa et diam fringilla convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum libero a ipsum congue, vitae ornare risus lacinia. Nullam volutpat orci sit amet sapien facilisis, non venenatis tortor ultricies. Duis fringilla augue in leo congue adipiscing. Cras...

CSS

body {
    margin-top: 160px; /* Accounting for the height of #header */
    font-family: Arial;
}

#header {
    position: fixed;
    top: 0;
    height: 150px;
    width: 100%;
    background-color: pink;
    color: purple;
    text-align: center;
}

#left-navigation {
    float:left;
    width: 20%;
}

#left-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#left-navigation a {
    padding: 5px;
    display: block;
    background-color: purple;
    color: #fff;
    font-weight: bold;    
    text-decoration: none;
}

#left-navigation a:hover {
    background-color: pink; 
    color: purple;
}

#content {
    width: 60%;  
    float: left;
}

#content p {
    margin: 0;
    padding: 0 10px 20px 10px;
}

#right-navigation {
    float: right;
    width: 20%;
    background-color: #f1f1f1;
}

#right-navigation h2 {
    color: purple;
    margin: 10px 0;
    line-height: 1em;
    text-align: center;
}

#right-navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#right-navigation li img {
    width:100%;   
}

footer {
    width:100%;  
    float:left;
    padding: 10px 0;
    background-color: lightpink;
}