JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<div>
    <header>
        <nav>
            <ul>
                <li>Home</li>
                <li>Blog</li>
                <li>Contact</li>
            </ul>
        </nav>
    </header>
    
    <section id="content">

    </section>
    
    <footer>
        <div>@ChaseWest87</div>
    </footer>
        
</div>

CSS

*{
    padding: 0px;
    margin: 0px;
}

body{
    background-color: #123;
    color: #ccc;
}

nav{
    width: 100%
}

nav ul{
    list-style: none;
    width: 100%;
    text-align: right;
}

nav li{ 
    display: inline-block;
    padding: 20px;
    margin: 0px 10px; 
    border-bottom: 2px solid transparent;
    font-size: 20px;
    cursor: pointer;
}

nav li:hover{
    color: #ddd;
    border-bottom-color: #ddd;
}

section#content{
    height: 400px;
}

footer{
    margin: 0px 20px;
    text-align: right;
}