JSFiddle - React, Tailwind, and code Playground

by Alex Rutherford

HTML

<ul class='links header'>
		<li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
	</ul>
	
	<ul class='links footer'>
		<li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
        <li><a href='#'>Some Link</a></li>
	</ul>

<div style="height: 1000px; width: 100px;"></div>

CSS

*{padding:0;margin:0;}

body{
    height:100%;
}
.header{
    top:0;
}
.footer{
    bottom:0;
}



.links{
    font:normal 18px arial;
    position:absolute;
    width:100%; /*needed because of posabs*/
    background:#bbb;
    text-align:center;
    list-style:none;
}

.links li{
    display:inline-block;
}

.links a{
    display:block;
    border-right:.1em solid #888;
    padding:.5em 1em;
    color:#111;
    text-decoration:none;
}

.links li:last-child a{
    border:none;
}

.links a:hover{
    color:#666;
    border-color:red;
}