Developer-Friendly Tailwind General Components

Latest Tailwind Components

Responsive HTML building blocks for marketing, applications, dashboards and more.

Search Bar

<js-component src="general/search_bar"></js-component>

Site Header

<header class="bg-white border-b border-gray-200 px-4 py-2 flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://placehold.co/40x40" alt="Logo" class="h-10 mr-4">
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="text-black hover:underline">Home</a>
            <a href="#" class="text-black hover:underline">About</a>
            <a href="#" class="text-black hover:underline">Services</a>
            <a href="#" class="text-black hover:underline">Contact</a>
        </nav>
    </div>
    <div class="flex items-center space-x-4">
        <div x-data="{ open: false }" class="relative">
            <button @click="open = !open" class="flex items-center focus:outline-none">
                <img src="https://placehold.co/32x32" alt="User Avatar" class="w-8 h-8 rounded-full">
            </button>
            <div x-show="open" @click.away="open = false" class="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg">
                <a href="#" class="block px-4 py-2 text-sm text-black hover:bg-gray-200">Profile</a>
                <a href="#" class="block px-4 py-2 text-sm text-black hover:bg-gray-200">Settings</a>
                <a href="#" class="block px-4 py-2 text-sm text-black hover:bg-gray-200">Logout</a>
            </div>
        </div>
    </div>
</header>

<js-component src="general/site_header"></js-component>