Componentes de búsqueda

Categorías

Componentes Reseñas de productos

Reseñas de productos

Opiniones y valoraciones de los usuarios sobre los productos

Componente de reseñas de productos

Componente de reseñas de productos receptivo con diseño brutalista, combinación de colores monocromática, complejidad compleja para el comercio electrónico, con soporte de tema oscuro

Abrir Vista previa

                <div class="bg-gray-900 text-white p-8 min-h-screen">
  <div class="container mx-auto">
    <h2 class="text-4xl font-bold mb-8 border-b-4 border-yellow-400 pb-2 dark:border-yellow-600">Customer Reviews</h2>

    <div class="grid md:grid-cols-2 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/75.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Sarah Johnson</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"This product is amazing! It exceeded my expectations."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">May 1, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/42.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">David Chen</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Absolutely love this! Highly recommended."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 28, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
      <!-- Review Card 3 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/women/80.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Emily Davis</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Good value for the price."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 25, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>
      
       <!-- Review Card 4 -->
      <div class="bg-gray-800 p-6 border-4 border-yellow-400 dark:border-yellow-600 shadow-[8px_8px_0px_rgba(250,204,21,1)] dark:shadow-[8px_8px_0px_rgba(202,138,4,1)]">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-400 dark:border-yellow-600" src="https://randomuser.me/api/portraits/men/60.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-bold text-lg">Michael Brown</p>
            <div class="flex items-center">
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-yellow-400 dark:text-yellow-600">&#9733;</span>
              <span class="text-gray-600 dark:text-gray-400">&#9733;</span>
            </div>
          </div>
        </div>
        <p class="mb-4 italic">"Solid product, works as expected."</p>
        <div class="flex justify-between items-center text-sm text-gray-400 dark:text-gray-500">
          <span>Posted on: <span class="text-yellow-400 dark:text-yellow-600">April 20, 2023</span></span>
          <button class="text-yellow-400 hover:underline dark:text-yellow-600 dark:hover:underline focus:outline-none">Read More</button>
        </div>
      </div>

    </div>
  </div>
</div>

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.

Abrir Vista previa

                <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

Componente de reseñas de productos

Un componente de reseñas de productos complejo y atractivo con microinteracciones, diseñado para sitios web comerciales. El componente presenta un diseño responsivo de temática oscura que utiliza Tailwind CSS, incorporando animaciones y un esquema de color basado en colores análogos.

Abrir Vista previa

                <div class="bg-gray-900 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-100 dark:text-gray-200 mb-4">Product Reviews</h2>
    <div class="space-y-4">
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">John Doe</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"This product exceeded my expectations! Great quality and fast shipping. Highly recommend!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Jane Smith</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"I had a great experience with this product! The quality is impressive and it works as advertised."</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ★</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">5/5</span>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-700 p-4 rounded-lg transition-all duration-200 hover:shadow-md hover:bg-gray-700 dark:hover:bg-gray-600">
            <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-lg font-semibold text-gray-100 dark:text-gray-200">Mike Johnson</h3>
                    <p class="text-sm text-gray-400 dark:text-gray-500">Verified Buyer</p>
                </div>
            </div>
            <p class="text-gray-300 dark:text-gray-400 mb-2">"Good product, but it took a bit longer to arrive than I expected. Overall satisfied!"</p>
            <div class="flex items-center">
                <span class="text-yellow-400">★ ★ ★ ★ ☆</span>
                <span class="ml-2 text-gray-400 dark:text-gray-500">4/5</span>
            </div>
        </div>
    </div>
</div>

Componente de reseñas de productos

Un componente complejo de reseñas de productos diseñado para un tablero, con elementos de diseño 3D, colores de tono tierra y soporte para el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.5</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">3.8</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.0</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
    </div>
</div>

Componente de reseñas de productos

Un componente de reseñas de productos receptivo diseñado para el modo oscuro con una combinación de colores vibrantes, adecuado para sitios web comerciales / corporativos. Cuenta con avatares de usuario, calificaciones de reseñas y comentarios de usuarios en un diseño interactivo.

Abrir Vista previa

                <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>

Componente de reseñas de productos

Un componente de reseñas de productos diseñado en estilo brutalista, con alto contraste, diseño receptivo y soporte para temas oscuros. Incluye avatares de usuario e imágenes de productos de servicios de marcador de posición.

Abrir Vista previa

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

Componente de reseñas de productos

Componente de reseñas de productos con diseño de materiales, efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="container mx-auto p-4 dark:bg-gray-800">
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Customer Reviews</h2>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">John Doe</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="far fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget justo nec libero luctus feugiat.</p>
  </div>

  <div class="bg-white shadow-md rounded-lg p-4 mb-4 dark:bg-gray-700">
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold dark:text-white">Jane Smith</h3>
        <div class="text-yellow-500">
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
          <i class="fas fa-star"></i>
        </div>
      </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
  </div>

</div>

Componente de reseñas de productos

Componente de reseñas de productos que usa Tailwind CSS con estilo Neumorphism, efectos responsivos y soporte para temas oscuros. No se incluye código JavaScript. Se utilizan imágenes de marcador de posición y avatares.

Abrir Vista previa

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  body {
    background-color: #e0e0e0;
  }

  .neumorphism-card {
    background: #e0e0e0;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    border-radius: 12px;
  }

  .neumorphism-card-dark {
    background: #333;
    box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
    }

    .neumorphism-card {
      background: #333;
      box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
    }
  }
</style>

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card 1 -->
        <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
        </div>

        <!-- Review Card 2 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                 <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
        </div>

        <!-- Review Card 3 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
        </div>

    </div>
</div>

Componente de reseñas de productos

Componente de reseñas de productos con diseño de materiales, efectos responsivos y compatibilidad con temas oscuros.

Abrir Vista previa

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Customer Reviews</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-gray-400 dark:text-gray-600 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed felis at elit eleifend consectetur.
      </p>
    </div>
    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
      <div class="flex items-center mb-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div>
          <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Jane Smith</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">1 week ago</p>
        </div>
      </div>
      <div class="flex items-center mb-4">
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
        <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1 fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/>
        </svg>
      </div>
      <p class="text-gray-700 dark:text-gray-300">
        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </p>
    </div>
  </div>
</div>

Componente de reseñas de productos

Un componente responsivo de reseñas de productos creado con Tailwind CSS, con microinteracciones al pasar el mouse, compatibilidad con temas oscuros e imágenes de marcador de posición. No se utiliza JavaScript.

Abrir Vista previa

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
    <h2 class="text-2xl sm:text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 15, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Absolutely love this product! It exceeded my expectations in every way. The build quality is superb, and it performs flawlessly. Highly recommended!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
             <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Jane Smith</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 10, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Solid product, works as advertised. The setup was easy, and the features are intuitive. Deducted one star because the documentation could be clearer on advanced settings.</p>
        </div>

        <!-- Review Card -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Robert Johnson</p>
                    <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                    </div>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">July 1, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Outstanding performance! This is exactly what I was looking for. Setup was a breeze, and it's been working perfectly since day one. Five stars!</p>
        </div>

        <!-- Review Card with Product Image -->
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1">
            <img class="w-full h-32 object-cover rounded-md mb-6" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
            <div class="flex items-start mb-4">
                <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/91.jpg" alt="Avatar">
                <div class="flex-grow">
                    <p class="font-semibold text-gray-900 dark:text-white">Emily Davis</p>
                     <div class="flex items-center text-yellow-500 dark:text-yellow-400">
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                         <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.68z"/></svg>
                     </div>
                </div>
                 <span class="text-sm text-gray-500 dark:text-gray-400 ml-4 flex-shrink-0">June 28, 2023</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed">It's okay, does the job. Had some minor issues during installation, and the user interface is not as intuitive as I hoped. Decent for the price point, though.</p>
        </div>

    </div>
</div>