JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<nav><!-- << Could just as easily be a div -->
    <a href="#">Link 1</a><!--  << Comments are because inline-block will take in spaces and affect your margins
    --><a href="#">Link 2</a><!--
    --><a href="#">Longer Link 1</a><!--
    --><a href="#">Link 3</a><!--
    --><a href="#">Longer Link 2</a>
</nav>

CSS

nav {
    margin: 10px;
}

a {
    display: inline-block;
    margin: 0 5px 0 0;
    padding: 4px 10px;
    
    background: #eee;
    background-image: linear-gradient(top, rgb(254,254,254) 0%, rgb(225,225,225) 100%);
    background-image: -o-linear-gradient(top, rgb(254,254,254) 0%, rgb(225,225,225) 100%);
    background-image: -moz-linear-gradient(top, rgb(254,254,254) 0%, rgb(225,225,225) 100%);
    background-image: -webkit-linear-gradient(top, rgb(254,254,254) 0%, rgb(225,225,225) 100%);
    background-image: -ms-linear-gradient(top, rgb(254,254,254) 0%, rgb(225,225,225) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(254,254,254)), color-stop(1, rgb(225,225,225)));
    
    border: 1px solid #999;
    
    font: 14px 'Arial';
    color: #444;
    text-decoration: none;
}