JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<header>
    <nav>
        <a href="#" class="logo">logo</a>
        <a href="#">Portfolio</a>
        <a href="#">about me</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
    </nav>
</header>
<div id="main">
    <section>
        lol
    </section>
</div>
<footer>
    <nav>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>        
    </nav>
</footer>

CSS

body{
    background:#fff;
    margin:0;
    padding: 35px 0 0;
    border-top: 5px solid #28b1b3;
    color: #7E7E7E;
}
header{
    border-bottom: 1px solid #DEDEDE;
    height: 70px;
}

header nav a{
    position:relative;
    color:#999;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s ;
    -o-transition: all 0.4s ;
    transition: all 0.4s ;
    text-transform:uppercase;
}

header nav a:hover,
header nav a:active{
    color:#333;    
}

header nav a.logo{
   background:#999; 
   padding:10px;
   color:#fff;
}

nav a.logo:hover,
nav a.logo:active{
   background:#28b1b3; 
}
footer{
    display: block;
    margin-top: 45px;
    overflow: auto;
    padding: 30px 0 20px;
    width: auto;
    background:#484848;
}
footer nav a{
    color:#C6C8C8;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s ;
    -o-transition: all 0.4s ;
    transition: all 0.4s ;    
}
footer nav a:hover,
footer nav a:active{
    color:#fff;    
}