Product Reviews コンポーネント

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform perspective-1000 rotate-x-6 hover:rotate-x-0 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 relative z-10">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">Customer Reviews</h2>
        <div class="flex items-center space-x-1">
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-yellow-500 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-400 text-lg sm:text-xl">&#9733;</span>
          <span class="text-gray-600 dark:text-gray-400 text-sm sm:text-base font-medium">(4.5/5)</span>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-6">
        <!-- Review 1 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah Johnson">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">CEO, Tech Solutions</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "This product has fundamentally changed how we manage our customer relationships. The intuitive interface and powerful features are a game-changer. Highly recommend!"
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Jan 15, 2024</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
            </div>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="bg-white dark:bg-gray-700 p-4 sm:p-6 rounded-lg shadow-md transform translate-z-10 hover:translate-z-20 transition-all duration-300 border border-gray-200 dark:border-gray-600">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 object-cover border-2 border-indigo-500 dark:border-indigo-400" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Avatar of David Lee">
            <div>
              <p class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white">David Lee</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Founder, Marketing Pro</p>
            </div>
          </div>
          <p class="text-gray-700 dark:text-gray-200 leading-relaxed">
            "Excellent support and a truly robust CRM solution. It helps us streamline our sales process and improve customer satisfaction significantly."
          </p>
          <div class="flex justify-between items-center mt-4 text-sm text-gray-500 dark:text-gray-400">
            <span>Reviewed on Dec 28, 2023</span>
            <div class="flex items-center space-x-1 text-yellow-500">
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span>&#9733;</span>
              <span class="text-gray-400 dark:text-gray-500">&#9733;</span>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 text-center">
        <button class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition-shadow duration-300 transform translate-z-10 hover:translate-z-20 text-base sm:text-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-75">
          View All Reviews
        </button>
      </div>
    </div>
    <!-- Decorative '3D' element -->
    <div class="absolute inset-0 bg-gray-200 dark:bg-gray-950 -z-10 transform scale-105 rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 transition-all duration-500 ease-in-out opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="transform-origin: center center; filter: blur(50px);"></div>
  </div>
</div>