Componenti Recensioni dei prodotti Componente delle recensioni dei prodotti

Componente delle recensioni dei prodotti

Stile retrò/vintage, combinazione di colori dei toni della terra, complessità moderata Recensioni dei prodotti Componente con design reattivo e supporto per temi scuri. Utilizza Tailwind CSS per lo styling, picsum.photos per le immagini dei prodotti e randomuser.me per gli avatar. Niente JavaScript.

Anteprima

Codice HTML

<div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

Componenti correlati

Componente delle recensioni dei prodotti

Un componente minimalista per le recensioni dei prodotti progettato per le interfacce dei social media, che integra una combinazione di colori triadica ed elementi interattivi.

Aperto

Componente delle recensioni dei prodotti

Un componente per le recensioni dei prodotti progettato in stile brutalismo, caratterizzato da contrasto elevato, design reattivo e supporto per temi scuri. Include avatar utente e immagini di prodotti da servizi segnaposto.

Aperto

Recensioni dei prodotti Componente 6

Un componente reattivo per la recensione del prodotto con i principi del Material Design, che supporta temi chiari e scuri.

Aperto