Developer-Friendly Tailwind Blog Components

Latest Tailwind Components

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

Sidebar

<div class="flex flex-col h-auto w-64 bg-gray-100 p-4 border-r border-gray-300">
    <button class="mb-4 text-black" @click="$store.sidebarOpen = !$store.sidebarOpen">Toggle Sidebar</button>
    <nav>
        <ul class="flex flex-col space-y-2">
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Home</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">About</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Services</a></li>
            <li><a href="#" class="text-black hover:bg-gray-200 p-2 rounded">Contact</a></li>
        </ul>
    </nav>
    <div class="mt-6">
        <h2 class="text-black font-bold mb-2">Recent Posts</h2>
        <ul class="space-y-1">
            <li><a href="#" class="text-black hover:text-blue-500">Post one</a></li>
            <li><a href="#" class="text-black hover:text-blue-500">Post two</a></li>
            <li><a href="#" class="text-black hover:text-blue-500">Post three</a></li>
        </ul>
    </div>
    <div class="mt-6">
        <h2 class="text-black font-bold mb-2">Advertisements</h2>
        <img src="https://placehold.co/150x150" alt="Ad" class="w-full h-auto">
    </div>
</div>

<js-component src="blog/sidebar"></js-component>

Search Bar

View

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

Tags Cloud

View

<js-component src="blog/tags_cloud"></js-component>

Categories Menu

View

<js-component src="blog/categories_menu"></js-component>

Recent Articles List

View

<js-component src="blog/recent_articles_list"></js-component>