Developer-Friendly Tailwind Blog Components

Latest Tailwind Components

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

Pagination

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

Comments Section

<section class="max-w-screen-md mx-auto p-6">
    <h2 class="text-xl font-semibold mb-4">Comments</h2>
    <div class="space-y-4">
        <div class="bg-gray-100 p-4 rounded-lg">
            <div class="flex items-center mb-2">
                <img src="https://placehold.co/40x40" alt="User avatar" class="rounded-full w-10 h-10" />
                <div class="ml-3">
                    <p class="font-medium text-black">John Doe</p>
                    <p class="text-sm text-gray-500">October 1, 2023</p>
                </div>
            </div>
            <p class="text-black leading-tight">This is a very insightful article! I enjoyed reading it.</p>
        </div>
        
    </div>
    <div x-data="{ newComment: '' }" class="mt-6">
        <h3 class="text-lg font-medium mb-3">Add a Comment</h3>
        <textarea x-model="newComment" class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" rows="4" placeholder="Write your comment..."></textarea>
        <button @click="if(newComment) { alert('Comment submitted: ' + newComment); newComment = ''; }" class="mt-3 px-4 py-2 bg-blue-600 text-white rounded-lg focus:outline-none hover:bg-blue-700">Submit</button>
    </div>
</section>

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