Tailwind CSS Navbar - Taco Tall Stack

The navbar is an important UI/UX component that helps users quickly visit any site section. Below we are presenting an example of the Navbar component that you can use in your Taco project project.


Code

Below you can find the code for the Navbar component.


<x-navbar>
    <x-slot name="title">
        <a href="#" class="mr-4 block cursor-pointer py-1.5 font-sans text-sm font-normal leading-normal text-inherit antialiased">
            <span>Taco</span>
        </a>
    </x-slot>
    <x-slot name="items">
        <li class="block p-1 font-sans text-sm antialiased font-normal leading-normal text-inherit">
            <a class="flex items-center" href="#">
                Pages
            </a>
        </li>
        <li class="block p-1 font-sans text-sm antialiased font-normal leading-normal text-inherit">
            <a class="flex items-center" href="#">
                Account
            </a>
        </li>
        <li class="block p-1 font-sans text-sm antialiased font-normal leading-normal text-inherit">
            <a class="flex items-center" href="#">
                Blocks
            </a>
        </li>
        <li class="block p-1 font-sans text-sm antialiased font-normal leading-normal text-inherit">
            <a class="flex items-center" href="#">
                Docs
            </a>
        </li>
    </x-slot>
    <x-slot name="buttons">
        <x-button color="bg-gradient-to-tr from-blue-600 to-blue-400" class="w-full">
            <span>Buy Now</span>
        </x-button>
    </x-slot>
</x-navbar>