JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<header>
    <nav class="nav1">
        <ul>
            <li><a href="http://example.com/1">Hello World 1</a></li>
            <li><a href="http://example.com/2">Hello World 2</a></li>
            <li><a href="http://example.com/3">Hello World 3</a></li>
            <li><a href="http://example.com/4">Hello</a></li>
        </ul>
    </nav>
    <img src="http://markschamel.com/upload/blue.square.png" />
    <nav class="nav2">
        <ul>
            <li><a href="http://example.com/1">Hello World</a></li>
            <li><a href="http://example.com/2">Hello</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    width: 100%;
    text-align: center;
    background-color: #c87137;
    white-space: nowrap;
}
nav {
    min-width: 40%;
    display: inline-block;
}
nav.nav1 {
    text-align: right;
}
nav.nav2 {
    text-align: left;
}
nav ul {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-color: #ff0000;
}
nav li {
    background-color: #008000;
    border: 1px solid black;
    white-space: nowrap;
}
nav.nav1 li {
    float: right;
}
nav.nav2 li {
    float: left;
}
nav.nav1 li:nth-child(1) { margin-right: 0px; }
nav.nav1 li:nth-child(2) { margin-right: 5px; }
nav.nav1 li:nth-child(3) { margin-right: 10px; }
nav.nav1 li:nth-child(4) { margin-right: 15px; }

nav.nav2 li:nth-child(1) { margin-left: 0px; }
nav.nav2 li:nth-child(2) { margin-left: 5px; }
nav.nav2 li:nth-child(3) { margin-left: 10px; }
nav.nav2 li:nth-child(4) { margin-left: 15px; }