JSFiddle - React, Tailwind, and code Playground

by moumensoliman

HTML

<nav>
    <center>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Posts</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Sign Up/Log In</a></li>
            <li><a href="#">Other</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </center>
</nav>

<div id="socials">
    <center>
        <a href="#" class="fa fa-facebook"></a>
    </center>
</div>

CSS

nav{
    background-color: #fcb254;
    height: auto;
    width: 100%;
    background-color: #fcb254;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: ;
    border: solid 3px #f19828;
    float: left;
}

nav ul{
    padding: 5px;
}

nav ul li{
    display: inline-block;
    padding: 10px 5px 10px 0px;
    font-size: 23px;
}

nav ul li a{
    color: white;
    text-decoration: none;
}

nav ul li:hover{
    background-color: #3c79a1;
}

#socials {
    background-color: #fcb254;
    height: auto;
    width: 20%;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: ;
    border: solid 3px #f19828;
    float: left;
    clear: left;
}