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.
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">
★★★★☆ <!-- 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">
★★★★★ <!-- 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
Componente de reseñas de productos neumórficos
Un componente de reseñas de productos simple y receptivo con un diseño neumórfico, combinación de colores análoga y compatibilidad con modo oscuro, adecuado para sitios web comerciales o corporativos.
Componente de reseñas de productos
Un componente web que muestra las reseñas de los usuarios sobre un producto, con microinteracciones y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de reseñas de productos
Un componente de reseñas de productos receptivo diseñado para interfaces de redes sociales, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Incluye calificaciones, avatares de usuario, texto de revisión y un botón 'Leer más'.