Tailwind CSS Navbar - Versoly UI

Added in 1.0 JS Required

Example

<nav class="navbar sticky top-0 bg-white" id="navbar">
    <div class="container">
        <a class="navbar-brand" href="/">
            <img width="30" height="45" alt="company logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/2f7d47af-ad93-480c-a98c-5085f3c724c8.png" />
            <span>Ipsum</span>
        </a>
        <button class="navbar-btn" data-toggle="collapse" data-target="#navbar-row" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Open navbar menu</span>
            <span class="block h-1 rounded-full bg-primary"></span>
            <span class="block h-1 mt-1 rounded-full bg-primary"></span>
            <span class="block h-1 mt-1 rounded-full bg-primary"></span>
        </button>
        <div class="navbar-row" id="navbar-row">
            <ul class="navbar-col"></ul>
            <ul class="navbar-col"></ul>
            <ul class="navbar-col">
                <li>
                    <a class="nav-link font-semibold" href="/#">Pricing</a>
                </li>
                <li>
                    <a class="nav-link font-semibold" href="#">Login</a>
                </li>
                <li>
                    <a class="nav-link btn btn-primary" href="#">Get Started âž”</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Dark


  <nav class="navbar sticky top-0 navbar-dark bg-dark" id="navbar">
    <div class="container">
        <a class="navbar-brand text-white" href="/">
            <img width="30" height="45" alt="company logo" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/2f7d47af-ad93-480c-a98c-5085f3c724c8.png" />
            <span>Ipsum</span>
        </a>
        <button class="navbar-btn" data-toggle="collapse" data-target="#navbar-row" aria-expanded="false" aria-label="Toggle navigation">
            <span class="sr-only">Open navbar menu</span>
            <span class="block h-1 rounded-full bg-white"></span>
            <span class="block h-1 mt-1 rounded-full bg-white"></span>
            <span class="block h-1 mt-1 rounded-full bg-white"></span>
        </button>
        <div class="navbar-row" id="navbar-row">
            <ul class="navbar-col"></ul>
            <ul class="navbar-col"></ul>
            <ul class="navbar-col">
                <li>
                    <a class="nav-link text-white font-semibold" href="/#">Pricing</a>
                </li>
                <li>
                    <a class="nav-link text-white font-semibold" href="#">Login</a>
                </li>
                <li>
                    <a class="nav-link btn btn-primary text-white font-semibold" href="#">Get Started âž”</a>
                </li>
            </ul>
        </div>
    </div>
</nav>