Composants fonctionnels
Une fiche produit e-commerce simple et réactive inspirée de la 3D, avec une palette de couleurs analogue, prenant en charge le mode sombre.
HTML Code
<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>Composants associés
Composants fonctionnels
Composant fonctionnel pour le commerce électronique avec un design réactif et la prise en charge du thème sombre.
Event_Conference_Schedule
Un composant réactif de calendrier d’événements/conférences avec un design inspiré du papier/de l’impression et une palette de couleurs vert forêt, y compris la prise en charge du mode sombre. Il dispose d’une navigation par onglets pour différents jours et de détails de session extensibles.
Composants fonctionnels
Un composant doté d’un style de conception glassmorphism avec des effets réactifs et la prise en charge du thème sombre, utilisant Tailwind CSS.