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

1.8k

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

Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

4 months ago

592
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

1 month ago

376
Nested comment section
This is a comment thread with a reply, up-vote, and down-vote buttons.

Author:
Prajwal Hallale

2 years ago

14.1k
Simple comment box

Author:
Lukas Müller

2 years ago

10.7k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

2 months ago

62
Post Detail
Post detail with form

Author:
Sedat Kumcu

7 months ago

1.1k
Whatsapp like chat design

Author:
Simon Scheffer

2 years ago

12.6k
Simple Comment Section Component
This is a Simple Comment Section Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

1 year ago

1.9k
Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

1 year ago

17.5k
Comment form

Author:
Sophia Baker

2 years ago

11.9k
Comment card

Author:
Simon Scheffer

2 years ago

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

Author:
Prajwal Hallale

1 year ago

7.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components