Composants de mise en page Composant 40
Un composant de mise en page réactif avec des micro-interactions avec des animations attrayantes. Il comprend une structure de carte avec des interactions utilisateur telles que des effets de survol, une mise à l’échelle et des ajustements de thème sombre.
HTML Code
<div class="max-w-sm mx-auto">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="p-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300 transition duration-300 ease-in-out">User Profile</h2>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 hover:scale-110 transition-transform duration-300 ease-in-out">
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
</div>
</div>
<div class="p-4">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder Image" class="w-full h-auto rounded-md hover:scale-105 transition-transform duration-300 ease-in-out">
</div>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-300">This component features engaging microinteractions that enhance user experience by providing visual feedback on actions.</p>
</div>
<div class="flex justify-end p-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition-all duration-300 ease-in-out">Follow</button>
</div>
</div>
</div>Composants associés
Glassmorphism Disposition du tableau de bord
Une disposition simple pour un tableau de bord avec des éléments translucides ressemblant à du verre givré, avec une palette de couleurs pastel et une prise en charge du mode sombre.
Glassmorphism Aménagement d’entreprise
Un composant de mise en page glassmorphism simple et réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS, avec des tons de terre.
Composant Triadic 3D Business Layout
Il s’agit d’un composant de mise en page de complexité modérée pour les sites Web d’entreprise, avec une palette de couleurs triadique et des éléments de conception 3D pour plus de profondeur, avec une réactivité totale et une prise en charge du mode sombre.