JSFiddle - React, Tailwind, and code Playground

by Jose Torres

HTML

<header class = "main-header" id="top">
    <div class = "top-menu-container">
        <div class = "container">
            <nav class = "top-menu-navigation clearfix">
                <ul>
                    <li><a href="">Top link 1</a></li>
                    <li><a href="">Top link 3</a></li>
                </ul>
            </nav>  <!--end navigation-->
        </div>  <!--end container-->
    </div>  <!--end top-menu-container-->
</header>

CSS

/*VARIABLES*/
@link-color: "#000000";
@text-color: "#5b5b5b";
@light-text-color:"c9c9c9";
@heading-font: "Bree Serif";
@body-font: "Arial";

body
{
    background: transparent url('images/bg.jpg')0 0 repeat;
}

ul
{
    margin-bottom: 1.5em;
}

.main-header
{
    background: white;
    border-bottom: 1 px solid @boarder color;
}


.top-menu-container
{
    background: black;
}
.top-menu-navigation ul>li
{
    float: left;
}
a
{
    color: green;
}