Componenti Recensioni dei prodotti Componente delle recensioni dei prodotti
Componente delle recensioni dei prodotti

Un componente di recensione di prodotti di moda/bellezza ispirato al cyberpunk, con accenti di tonalità della terra su uno sfondo scuro. È reattivo e include il supporto per la modalità oscura.
Anteprima

Codice HTML

<section class="bg-zinc-900 dark:bg-black py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white dark:text-gray-100 text-center mb-12 relative">
      Customer Insights
      <span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-500 mx-auto mt-4 rounded-full"></span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Alice J.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Absolutely love this product! The quality is outstanding, and it exceeded my expectations. It's a game-changer for my daily routine. Highly recommend for anyone looking for reliability and style."
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Mark T.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "An absolute must-have! The craftsmanship is superb, and it feels incredibly durable. It has greatly improved my experience, and I've received many compliments. Worth every penny!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
      </div>

      <!-- Review Card 3 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Sophia L.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Impressed with the efficiency and sleek design. It fits perfectly into my lifestyle. The results are noticeable, and I'm very happy with my purchase. Don't hesitate if you're considering it!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
      </div>
    </div>

    <div class="text-center mt-16">
      <button class="px-8 py-3 rounded-full bg-yellow-600 dark:bg-yellow-500 text-white dark:text-gray-900 font-bold text-lg uppercase tracking-wide shadow-lg transform transition-transform duration-300 hover:scale-105 hover:bg-yellow-700 dark:hover:bg-yellow-400 focus:outline-none focus:ring-4 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-opacity-75">
        View More Reviews
      </button>
    </div>
  </div>
</section>
Componenti correlati

Componente delle recensioni dei prodotti

Un componente di recensioni di prodotti in stile neumorfico che include avatar degli utenti, testo delle recensioni e valutazioni a stelle. Incorpora un design reattivo e il supporto della modalità oscura utilizzando Tailwind CSS.
Aperto
Componente Recensioni dei prodotti di gioco

Un componente giocoso e vivace per le recensioni dei prodotti per i siti Web di gioco, con elementi arrotondati, colori ad alta saturazione e un'interfaccia ricca con valutazioni a stelle, avatar degli utenti, testo delle recensioni e pulsanti Mi piace/Non mi piace. Completamente reattivo con supporto per la modalità oscura.
Aperto
Componente delle recensioni dei prodotti

Un componente per le recensioni dei prodotti con elementi di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Aperto