Componenti Recensioni dei prodotti Componente delle recensioni dei prodotti

Componente delle recensioni dei prodotti

Un componente reattivo per le recensioni dei prodotti progettato per la modalità oscura con una combinazione di colori vivaci, adatto per siti Web aziendali/aziendali. Presenta avatar degli utenti, valutazioni delle recensioni e commenti degli utenti in un layout interattivo.

Anteprima

Codice HTML

<div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente delle recensioni dei prodotti

Un componente reattivo per le recensioni dei prodotti con un design industriale delle materie prime, una tavolozza di colori retrò/vintage tenui e il supporto della modalità scura, adatto per applicazioni meteorologiche/climatiche.

Aperto

Scheda di recensione del prodotto retrò

Un componente di recensione del prodotto progettato con un'estetica retrò/vintage, utilizzando una combinazione di colori triadica (verde acqua, fucsia, ambra). È semplice, reattivo, supporta la modalità oscura ed è adatto per un portfolio per mostrare il feedback dei prodotti. Utilizza Tailwind CSS.

Aperto

Neumorphic_Product_Reviews_Component_High_Contrast

Un componente neutromorfico complesso per le recensioni dei prodotti ad alto contrasto con funzioni di prenotazione, progettato per la reattività e la modalità scura, che offre un'interfaccia utente ricca e interattiva.

Aperto