Componente de componentes interactivos
Una tarjeta de producto de comercio electrónico compleja con elementos de diseño 3D, que utiliza un esquema de color triádico, diseñada para experiencias de compra en línea interactivas con soporte de modo responsivo y oscuro.
Código HTML
<div class="bg-gradient-to-br from-purple-100 via-pink-100 to-indigo-100 p-4 min-h-screen flex items-center justify-center dark:from-gray-900 dark:via-purple-950 dark:to-indigo-950">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center text-gray-900 mb-12 relative z-10 animate-fade-in-down dark:text-gray-100">
<span class="block">Explore Our <span class="text-indigo-600 dark:text-indigo-400">Collection</span></span>
<span class="block text-2xl md:text-3xl text-purple-600 dark:text-purple-400 mt-2">Experience 3D Depth</span>
<div class="absolute inset-0 flex items-center justify-center -z-10">
<div class="w-32 h-32 md:w-48 md:h-48 bg-purple-200 dark:bg-purple-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-slow"></div>
<div class="w-48 h-48 md:w-64 md:h-64 bg-indigo-200 dark:bg-indigo-800 rounded-full mix-blend-multiply opacity-30 blur-2xl animate-spin-reverse-slow"></div>
</div>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-purple-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-pink-500 to-purple-600 dark:from-pink-700 dark:to-purple-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/157/400/300" alt="Elegant Watch" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute top-3 right-3 text-sm px-3 py-1 bg-purple-600 text-white rounded-full font-semibold shadow-md">New Arrival</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">AstroPulse Watch</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Precision, Elegance, Future.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-indigo-600 dark:text-indigo-400">$299</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$349</p>
</div>
<button class="w-full py-3 px-6 bg-purple-600 text-white rounded-lg hover:bg-purple-700 dark:bg-purple-800 dark:hover:bg-purple-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Crafted with aerospace-grade sapphire glass and a sustainable recycled titanium casing.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Water Resistance: 100m</li>
<li>Battery Life: 30 days</li>
<li>Smart Notifications</li>
<li>Eco-Friendly Materials</li>
</ul>
<button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Customize Now
</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-indigo-500/50 dark:hover:shadow-indigo-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-500 to-pink-600 dark:from-indigo-700 dark:to-pink-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/29/400/300" alt="Wireless Headphones" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute top-3 left-3 text-sm px-3 py-1 bg-indigo-600 text-white rounded-full font-semibold shadow-md">Limited Offer</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">SonicWave Headphones</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Immersive Sound, Unrivaled Comfort.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$189</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$220</p>
</div>
<button class="w-full py-3 px-6 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 dark:bg-indigo-800 dark:hover:bg-indigo-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Experience crystal-clear audio with adaptive noise cancellation and 40-hour battery life.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Noise Cancellation: Adaptive</li>
<li>Battery Life: 40 hours</li>
<li>Ergonomic Design</li>
<li>Bluetooth 5.2</li>
</ul>
<button class="w-full py-3 px-6 bg-pink-500 text-white rounded-lg hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Read Reviews
</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="card-3d-container perspective-1000">
<div class="card-3d transition-transform duration-700 ease-in-out transform-style-preserve-3d rounded-xl shadow-2xl bg-white dark:bg-gray-800 p-6 flex flex-col items-center justify-between hover:scale-105 hover:shadow-pink-500/50 dark:hover:shadow-pink-400/50 relative overflow-hidden group">
<div class="absolute inset-0 bg-gradient-to-br from-purple-500 to-indigo-600 dark:from-purple-700 dark:to-indigo-900 opacity-10 group-hover:opacity-20 transition-opacity duration-300 rounded-xl"></div>
<div class="card-front w-full flex flex-col items-center justify-between backface-hidden">
<div class="relative w-full h-48 mb-4 overflow-hidden rounded-lg shadow-inner-lg transform transition-transform duration-500 ease-out group-hover:z-20 group-hover:scale-105">
<img src="https://picsum.photos/id/27/400/300" alt="Smart Speaker" class="w-full h-full object-cover rounded-lg">
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30 dark:to-black/50 rounded-lg"></div>
<span class="absolute bottom-3 right-3 text-sm px-3 py-1 bg-pink-600 text-white rounded-full font-semibold shadow-md">Best Seller</span>
</div>
<h3 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">EchoSphere Speaker</h3>
<p class="text-md text-gray-600 text-center mb-4 dark:text-gray-300">Intelligent Audio, Seamless Integration.</p>
<div class="flex items-center justify-between w-full mb-4">
<span class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">$129</span>
<p class="text-lg font-medium text-gray-500 line-through dark:text-gray-400">$150</p>
</div>
<button class="w-full py-3 px-6 bg-pink-600 text-white rounded-lg hover:bg-pink-700 dark:bg-pink-800 dark:hover:bg-pink-700 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0 relative overflow-hidden">
<span class="absolute inset-0 w-full h-full bg-gradient-to-r from-pink-500 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<span class="relative z-10">Add to Cart</span>
</button>
<a href="#" class="mt-4 text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-500 text-sm font-medium transition-colors">View Details</a>
</div>
<div class="card-back absolute w-full h-full flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-xl backface-hidden transform rotateY-180">
<p class="text-lg text-gray-700 text-center mb-4 dark:text-gray-200">Your smart home hub with voice assistant integration and 360-degree sound.</p>
<ul class="text-md text-gray-600 list-disc list-inside space-y-2 mb-6 dark:text-gray-300">
<li>Voice Assistant: AI Powered</li>
<li>Audio: 360° Omnidirectional</li>
<li>Smart Home Integration</li>
<li>Multi-room Audio</li>
</ul>
<button class="w-full py-3 px-6 bg-purple-500 text-white rounded-lg hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 transition duration-300 text-lg font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 active:translate-y-0">
Explore Features
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Base styles for the 3D card */
.perspective-1000 {
perspective: 1000px;
}
.card-3d-container {
position: relative;
width: 100%;
height: 100%; /* Ensure container has height for children */
display: flex; /* Make it a flex container to center child */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
min-height: 480px; /* Minimum height for cards */
}
.card-3d {
position: relative;
width: 100%;
height: auto; /* Adjust height based on content */
min-height: 480px; /* Ensure a consistent minimum height */
transform-origin: center center; /* Ensure consistent rotation origin */
}
/* Front and back faces */
.backface-hidden {
backface-visibility: hidden;
}
.card-front,
.card-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
box-sizing: border-box;
}
.card-back {
transform: rotateY(180deg);
}
/* Flip effect on hover */
.card-3d-container:hover .card-3d {
transform: rotateY(180deg);
}
/* Inner shadow effect for image */
.shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), inset 0 4px 6px 0 rgba(0, 0, 0, 0.05);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2), inset 0 4px 6px 0 rgba(0, 0, 0, 0.15);
}
/* Custom animations */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 1s ease-out forwards;
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin-slow 15s linear infinite;
}
@keyframes spin-reverse-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.animate-spin-reverse-slow {
animation: spin-reverse-slow 20s linear infinite;
}
/* Responsive adjustments for overall layout */
@media (max-width: 767px) {
.card-3d-container {
min-height: 450px; /* Slightly reduce min-height for mobile */
}
.card-3d {
min-height: 450px;
}
.card-front h3, .card-back h3 {
font-size: 1.75rem; /* Equivalent to text-2xl */
}
.card-front p, .card-back p {
font-size: 0.875rem; /* Equivalent to text-sm */
}
.card-front span.text-3xl {
font-size: 2rem; /* Reduce price size slightly */
}
}
</style>Componentes relacionados
Componente de componentes interactivos
Un componente interactivo inspirado en el brutalismo para un blog, con tonos tierra de alto contraste, diseño responsivo y compatibilidad con el modo oscuro.
BrutalismoPortafolioInteractivo
Componente de componentes interactivos con diseño brutalista, colores vibrantes y diseño complejo para fines de portafolio, responsivo con soporte de tema oscuro.
Ficha de producto brutalista
Un sencillo componente interactivo de ficha de producto para e-commerce, con un diseño brutalista en escala de grises. Cuenta con una imagen del producto, título, precio y un botón 'Agregar al carrito'. El componente responde y es compatible con el modo oscuro. Se incluyen efectos de desplazamiento para la interactividad.