구성 요소 제품 리뷰 제품 리뷰 구성 요소

제품 리뷰 구성 요소

Product Reviews Material Design, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소.

미리 보기

HTML 코드

<div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>

관련 구성 요소

제품 리뷰 구성 요소

소셜 미디어 인터페이스를 위해 설계된 미니멀한 제품 리뷰 구성 요소로, 트라이어딕 색 구성표와 인터랙티브 요소를 통합합니다.

열다

제품 리뷰 구성 요소

산업용, 원자재 디자인, 차분한 레트로/빈티지 색상 팔레트 및 날씨/기후 응용 분야에 적합한 다크 모드 지원을 갖춘 반응형 제품 리뷰 구성 요소입니다.

열다

제품 리뷰 구성 요소

사이버펑크에서 영감을 받은 패션/뷰티 제품을 위한 제품 리뷰 구성 요소로, 어두운 배경에 흙빛 액센트가 특징입니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.

열다