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

Simple comment box

Author:
Lukas Müller

1 year ago

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

Author:
Shariar Hasan

11 months ago

1.6k
Comment section

Author:
Task Master

2 years ago

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

Author:
Prajwal Hallale

2 years ago

13.8k
Comments section with form

Author:
Orion.c

1 year ago

9.1k
Comment form

Author:
Sophia Baker

2 years ago

11.5k
Comment section

Author:
Manuela Bianka

2 years ago

10.4k
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

4 months ago

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

Author:
Coastal UI

4 hours ago

3
Comment card

Author:
Simon Scheffer

1 year ago

9.4k
Comment section
Minimal comment section for your project

Author:
Prajwal Hallale

1 year ago

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

Author:
Prajwal Hallale

2 years ago

10.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components