Home
Lautaro Gómez
Customer Comments

Customer Comments

This tailwind example is contributed by Lautaro Gómez, on 05-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Comment Section

Author Lautaro Gómez

2.3k

Fork Fullscreen

<section class="bg-gray-100 py-8">
  <div class="container mx-auto px-4">
    <h2 class="text-2xl font-bold mb-4">Customer Comments</h2>

<div class="space-y-4">
      
      <div class="bg-white p-4 rounded-lg shadow">
        <div class="flex items-center mb-2">
          <img src="https://via.placeholder.com/40" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <h3 class="font-semibold">John Doe</h3>
            <p class="text-sm text-gray-500">Posted on March 15, 2024</p>
          </div>
        </div>
        <p class="text-gray-700">Great product! I've been using it for a week now and I'm very satisfied with its
          performance.</p>
        <div class="flex items-center mt-2">
          <button class="text-blue-500 hover:text-blue-600 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
            </svg>
            Like
          </button>
          <button class="text-gray-500 hover:text-gray-600">Reply</button>
        </div>
      </div>

<div class="bg-white p-4 rounded-lg shadow">
        <div class="flex items-center mb-2">
          <img src="https://via.placeholder.com/40" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <h3 class="font-semibold">Jane Smith</h3>
            <p class="text-sm text-gray-500">Posted on March 10, 2024</p>
          </div>
        </div>
        <p class="text-gray-700">The shipping was fast and the product arrived in perfect condition. Highly recommended!
        </p>
        <div class="flex items-center mt-2">
          <button class="text-blue-500 hover:text-blue-600 mr-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
            </svg>
            Like
          </button>
          <button class="text-gray-500 hover:text-gray-600">Reply</button>
        </div>
      </div>
    </div>

<form class="mt-8 bg-white p-4 rounded-lg shadow">
      <h3 class="text-lg font-semibold mb-2">Add a Comment</h3>
      <div class="mb-4">
        <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
        <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 font-medium mb-2">Comment</label>
        <textarea id="comment" name="comment" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea>
      </div>
      <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Post Comment
      </button>
    </form>
  </div>
</section>

Related Examples

Comments section with form

Author:
Orion.c

2 years ago

10.1k
Comment form

Author:
Sophia Baker

2 years ago

12.3k
Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

2 years ago

17.9k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

13.2k
Post Detail
Post detail with form

Author:
Sedat Kumcu

1 year ago

1.4k
User Comments Section
Display users' comments beautifully. The component also has a form for commenting.

Author:
Prajwal Hallale

2 years ago

7.5k
Comment section

Author:
Manuela Bianka

3 years ago

11.3k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

5 months ago

1.4k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

169
Simple comment box

Author:
Lukas Müller

2 years ago

11.1k
Comment card

Author:
Simon Scheffer

2 years ago

10.4k
Comment section

Author:
Task Master

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components