Comments Section 구성 요소

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h2>

  <!-- Comment 1 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★★</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★☆</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
    </div>
  </div>

  <!-- Comment Form (moderate complexity interactive feature) -->
  <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
    <form>
      <div class="mb-4">
        <label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
        <select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          <option>★★★★★ - Excellent</option>
          <option>★★★★☆ - Very Good</option>
          <option>★★★☆☆ - Good</option>
          <option>★★☆☆☆ - Fair</option>
          <option>★☆☆☆☆ - Poor</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
        <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
      </div>
      <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
        Submit Review
      </button>
    </form>
  </div>
</div>