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
Composant Composants fonctionnels - Interface utilisateur en mode sombre
Un composant de médias sociaux réactif conçu avec le mode sombre et les tons de terre, adapté aux interfaces de réseaux sociaux. Comprend des avatars d’utilisateurs, du contenu de publication et des boutons d’interaction.
Point culminant de la fonctionnalité de jeu
Une fonctionnalité de jeu réactive met en évidence un composant avec un design épuré et minimaliste mettant l’accent sur la typographie et un système de grille, en utilisant des neutres chauds et en prenant en charge le mode sombre. Comprend une grande image, un titre, une description et un bouton d’action.
Skeuomorphic_Analogous_Simple_Business_Component
Un composant professionnel simple conçu avec un style skeuomorphe utilisant des couleurs analogues, réactif pour les ordinateurs de bureau, les tablettes et les mobiles, avec prise en charge du mode sombre.