JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="menu">
        <a href="#" class="buttons">Home</a>
        <a href="#" class="buttons">About Us</a>
        <a href="#" class="buttons">Pictures</a>
        <a href="#" class="buttons">Contact Us</a>
    </div>
</div>

CSS

#main
{
    width: 64em;
    height: 25em;
}

#menu
{
    background-color: #00b875;
    height: 3em;
}

.buttons
{
    text-decoration: none;
    color: #ffffff;
    line-height: 3em;
    display: block;
    float:left;
    padding-left: 10px;
    padding-right: 10px;
    font-family: courier new;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

.buttons:hover
{
    background-color: #0d96d6;
}