JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<nav class="nav one text-center">
    <li class="nav-item inline"><a href="" class="nav-link">Link 1</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 2</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 3</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 4</a></li>
</nav>

<nav class="nav two text-right">
    <li class="nav-item inline"><a href="" class="nav-link">Link 1</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 2</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 3</a></li>
    <li class="nav-item inline"><a href="" class="nav-link">Link 4</a></li>
</nav>

<nav class="nav three">
    <li class="nav-item left"><a href="" class="nav-link">Link 1</a></li>
    <li class="nav-item left"><a href="" class="nav-link">Link 2</a></li>
    <li class="nav-item left"><a href="" class="nav-link">Link 3</a></li>
    <li class="nav-item left"><a href="" class="nav-link">Link 4</a></li>
</nav>

<nav class="nav four">
    <li class="nav-item right"><a href="" class="nav-link">Link 1</a></li>
    <li class="nav-item right"><a href="" class="nav-link">Link 2</a></li>
    <li class="nav-item right"><a href="" class="nav-link">Link 3</a></li>
    <li class="nav-item right"><a href="" class="nav-link">Link 4</a></li>
</nav>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    box-sizing: border-box;
    list-style: none
}

.nav {
    margin-bottom: 10px
}

.nav.one {
    background-color: #f1c40f
}

.nav.two {
    background-color: #e67e22
}

.nav.three {
    background-color: #e74c3c
}

.nav.four{
	background-color:#c0392b
}

.nav-link {
    padding: 10px;
    text-decoration: none;
    display: block
}

.text-center{
	text-align:center
}

.text-right{
	text-align:right
}

.inline {
    display: inline-block
}

.left {
    float: left
}

.right {
    float: right
}