Developer-Friendly Tailwind Social Components

Latest Tailwind Components

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

Comment Section

<div class="max-w-2xl mx-auto mt-8">
  <h3 class="text-xl font-semibold mb-4">Comments</h3>
  <div class="space-y-4">
    
    <div class="flex items-start space-x-2">
      <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
      <div class="flex-1">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Add a comment..." rows="3"></textarea>
        <div class="flex justify-end mt-2">
          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg">Post</button>
        </div>
      </div>
    </div>
    
    <div class="space-y-4">
      <div class="flex items-start space-x-2">
        <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
        <div>
          <div class="bg-gray-100 p-3 rounded-lg">
            <p class="font-semibold">Username</p>
            <p class="mt-1">This is a user comment. It can be multiple lines, but will adjust according to the content.</p>
          </div>
          <div class="text-sm text-gray-600 mt-1">Posted 2 hours ago</div>
        </div>
      </div>
      <div class="flex items-start space-x-2">
        <img src="https://placehold.co/48x48" alt="User avatar" class="w-12 h-12 rounded-full">
        <div>
          <div class="bg-gray-100 p-3 rounded-lg">
            <p class="font-semibold">Another User</p>
            <p class="mt-1">Another example of a comment left by a different user.</p>
          </div>
          <div class="text-sm text-gray-600 mt-1">Posted 3 hours ago</div>
        </div>
      </div>
    </div>
  </div>
</div>

<js-component src="social/comment_section"></js-component>