제품 리뷰 구성 요소

<div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700
    p-6 sm:p-8 md:p-10
    transform skew-y-1 rotate-1 scale-95
    hover:scale-100 hover:rotate-0 hover:skew-y-0 hover:shadow-2xl
    transition-all duration-300 ease-in-out
    relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-300/50 before:to-transparent before:via-gray-100/30 dark:before:from-gray-700/50 dark:before:to-transparent dark:before:via-gray-900/30
    after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-12 after:bg-gradient-to-t after:from-gray-200/80 after:to-transparent dark:after:from-gray-800/80 dark:after:to-transparent">

    <div class="relative z-10 flex items-center justify-between mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Customer Feedback</h2>
      <span class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-semibold shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50">Total: 124 reviews</span>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:gap-8 relative z-10">

      <!-- Review 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John D.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "The XYZ-1000 machine has significantly boosted our production efficiency. Robust and reliable, it handles extreme loads with ease. A truly industrial-grade product."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Oct 24, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Maria S.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "Exceptional quality and precision from their industrial-grade components. Their team provided excellent support throughout the integration process. Highly recommend for critical applications."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Sep 10, 2023</p>
      </div>

    </div>

    <button class="relative z-10 mt-8 w-full py-3 px-6
      bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold rounded-lg
      shadow-lg shadow-gray-400/50 dark:shadow-gray-950/50
      border border-gray-400 dark:border-gray-600
      transform active:translate-y-0.5 active:shadow-none
      hover:bg-gray-400 hover:dark:bg-gray-600
      transition-colors duration-200 ease-in-out
      text-lg sm:text-xl
      before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-300/30 before:to-transparent dark:before:from-gray-700/30 dark:before:to-transparent">
      Load More Reviews
    </button>

  </div>
</div>