Componentes funcionales Componente
Una tarjeta de producto de comercio electrónico simple, receptiva e inspirada en 3D con un esquema de color análogo, compatible con el modo oscuro.
Código HTML
<div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
<div class="relative h-96 w-72 transform rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 p-6 shadow-2xl transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-800">
<div class="absolute inset-0 -z-10 transform rounded-lg bg-gradient-to-br from-purple-300 to-indigo-400 opacity-50 blur-xl dark:from-purple-600 dark:to-indigo-700"></div>
<div class="flex flex-col items-center justify-between h-full">
<h2 class="mb-2 text-center text-2xl font-bold text-white">3D Product</h2>
<div class="relative mb-4 h-32 w-32">
<img src="https://picsum.photos/id/176/200/200" alt="Product Image" class="h-full w-full rounded-full object-cover shadow-lg transform transition-transform duration-300 hover:scale-110">
<div class="absolute inset-0 rounded-full ring-4 ring-white ring-opacity-50 dark:ring-gray-800"></div>
</div>
<p class="mb-4 text-center text-sm text-white text-opacity-80">A high-quality product with a unique 3D design for an immersive experience.</p>
<div class="flex items-center justify-between w-full">
<span class="text-xl font-bold text-white">$99.99</span>
<button class="rounded-full bg-white px-4 py-2 text-purple-600 shadow-md transition-all duration-300 hover:bg-purple-100 hover:text-purple-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
Add to Cart
</button>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes funcionales Componente
Un componente de tablero complejo y receptivo con una estética monoespaciada/de desarrollador, que utiliza neutros fríos. Cuenta con elementos de visualización de datos, secciones tipo terminal y compatibilidad con el modo oscuro.
Tarjeta de reserva inspirada en papel/impresión
Un componente de tarjeta de reserva/reserva simple y receptivo con un diseño inspirado en el papel/impresión y una combinación de colores en tonos tierra, con soporte para el modo oscuro. Adecuado para mostrar las franjas horarias de las citas o los detalles de las reservas.
Componente funcional de comercio electrónico
Componente de comercio electrónico de diseño plano minimalista con esquema de color triádico y soporte de modo oscuro receptivo.