Produktbewertungen Komponente - Papier/Print-Neon/Elektrisch

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">

  <!-- Review Card Container -->
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

    <!-- Review Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
                relative transition-all duration-300 ease-in-out
                hover:scale-[1.01] hover:shadow-2xl hover:border-fuchsia-500 dark:hover:border-lime-400
                p-6 sm:p-8">
      
      <!-- Corner Fold Effect -->
      <div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-fuchsia-400 dark:border-r-lime-400 border-t-transparent border-l-transparent
                  transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
      
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-400 dark:border-lime-400 object-cover mr-4">
        <div>
          <p class="font-semibold text-lg text-fuchsia-600 dark:text-lime-400">Alice Johnson</p>
          <div class="flex mt-1">
            <!-- Star Rating (Neon Blue) -->
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-fuchsia-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
          </div>
        </div>
      </div>
      <h3 class="text-xl font-bold mb-3 text-fuchsia-700 dark:text-lime-300">"Absolutely fantastic!"</h3>
      <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
        This product exceeded my expectations. The documentation is clear and concise, making it incredibly easy to set up and use.
        Highly recommend for anyone seeking reliability and performance. A true game-changer!
      </p>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
    </div>

    <!-- Review Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
                relative transition-all duration-300 ease-in-out
                hover:scale-[1.01] hover:shadow-2xl hover:border-sky-500 dark:hover:border-cyan-400
                p-6 sm:p-8">
      
      <!-- Corner Fold Effect -->
      <div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-sky-400 dark:border-r-cyan-400 border-t-transparent border-l-transparent
                  transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>

      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-sky-400 dark:border-cyan-400 object-cover mr-4">
        <div>
          <p class="font-semibold text-lg text-sky-600 dark:text-cyan-400">Mark Davis</p>
          <div class="flex mt-1">
            <!-- Star Rating (Neon Pink) -->
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
            <svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
          </div>
        </div>
      </div>
      <h3 class="text-xl font-bold mb-3 text-sky-700 dark:text-cyan-300">"Good, but room for improvement."</h3>
      <p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
        The product works as advertised, and the core functionality is solid. Some sections of the documentation could be more detailed,
        especially for advanced users. Overall, a useful tool with potential.
      </p>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
    </div>

  </div>

  <!-- Optional: Add a call to action or overall rating section -->
  <div class="max-w-4xl mx-auto text-center mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-4 border-gray-300 dark:border-gray-700
              relative overflow-hidden group">
    
    <!-- Faint diagonal striped overlay for paper effect -->
    <div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-100/10 to-transparent dark:via-gray-900/10 opacity-20
                transform rotate-45 scale-150 pointer-events-none z-0"></div>
    
    <div class="relative z-10">
      <h2 class="text-3xl font-extrabold text-blue-700 dark:text-cyan-300 mb-4 tracking-tight">
        What People Say About Us
      </h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
        We value your feedback! Leave a review and help us improve.
      </p>
      <a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-sm
                        text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500
                        dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-400
                        transform transition-all duration-300 ease-out
                        hover:scale-105 active:scale-95
                        group-hover:ring-offset-lime-300 dark:group-hover:ring-offset-fuchsia-300 
                        group-hover:ring-fuchsia-500 dark:group-hover:ring-lime-400 group-hover:ring-2">
        Submit Your Review
        <svg class="ml-3 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
      </a>
    </div>
  </div>

</div>