JSFiddle - React, Tailwind, and code Playground

by Ruben Geert van den Berg

HTML

<div></div>	

<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>

CSS

html{
    height:100%;
}

body{
    position:relative;
    min-height:100%;
}

div{
    height:1200px; /*Make page 'high'. Footer stays in place after removing this line.*/
}

body,ul{
padding:0;
margin:0;
}

.footer{
bottom:0;
}

.header{
top: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;
}