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.7k

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

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

9 months ago

1.9k
Comment card

Author:
Simon Scheffer

3 years ago

10.8k
Générateur de Certificat Officiel
Générateur de Certificat Officiel

Author:
Omer fils ELENGA

2 months ago

183
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

2 months ago

71
Comment Section
The minimal comment section for your project with user user images.

Author:
Prajwal Hallale

3 years ago

10.3k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

1 month ago

143
TailwindFlex by omerlink
TailwindFlex

Author:
Omer fils ELENGA

3 days ago

4
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Author:
Omer fils ELENGA

2 months ago

193
Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

2 years ago

18.1k
Portfolio by omerlinks the mouse
Portfolio by omerlinks the mouse

Author:
Omer fils ELENGA

1 month ago

271
Comments section with form

Author:
Orion.c

2 years ago

10.8k
card section neon
card section neon

Author:
Omer fils ELENGA

1 month ago

243

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components