Componentes Reseñas de productos Componente de reseñas de productos

Componente de reseñas de productos

Estilo retro/vintage, combinación de colores en tonos tierra, componente de reseñas de productos de complejidad moderada con diseño receptivo y soporte de temas oscuros. Utiliza Tailwind CSS para el estilo, picsum.photos para las imágenes de productos y randomuser.me para los avatares. Sin JavaScript.

Vista previa

Código 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

Componentes relacionados

Reseñas de productos Componente 6

Un componente de revisión de productos responsivo diseñado con los principios de Material Design, que admite temas claros y oscuros.

Abrir

Componente de reseñas de productos

Un componente de reseñas de productos simple, monocromático y esqueuomórfico diseñado para empresas manufactureras/industriales, con diseño receptivo y soporte para modo oscuro.

Abrir

Componente de reseñas de productos

Un componente de reseñas de productos receptivo con un diseño industrial de materias primas, paleta de colores retro / vintage apagada y soporte de modo oscuro, adecuado para aplicaciones meteorológicas / climáticas.

Abrir