Componentes Reseñas de productos Tarjeta de revisión de productos retro

Tarjeta de revisión de productos retro

Un componente de revisión de productos diseñado con una estética Retro/Vintage, utilizando un esquema de color triádico (verde azulado, fucsia, ámbar). Es simple, receptivo, admite el modo oscuro y es adecuado para un portafolio para mostrar comentarios sobre el producto. Utiliza Tailwind CSS.

Vista previa

Código HTML

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 4 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
    </p>
  </div>
</div>

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 5 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
    </p>
  </div>
</div>

Componentes relacionados

Neumorphic_Product_Reviews_Component_High_Contrast

Un componente complejo de reseñas de productos neumórficos de alto contraste con funciones de reserva/reserva, diseñado para la capacidad de respuesta y el modo oscuro, que ofrece una interfaz de usuario rica e interactiva.

Abrir

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

Componentes de reseñas de productos - Bauhaus Rainbow Gradient

Un componente de reseñas de productos simple y funcional con un diseño inspirado en la Bauhaus y un esquema de colores degradados del arco iris, adecuado para consultoría / servicios. Totalmente receptivo con soporte para modo oscuro.

Abrir