Componenti di layout Componente 40
Un componente di layout reattivo con microinterazioni con animazioni accattivanti. Include una struttura a schede con interazioni dell'utente come effetti al passaggio del mouse, ridimensionamento e regolazioni del tema scuro.
Codice HTML
<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>Componenti correlati
Componente Componenti di layout
Un componente di layout della dashboard reattivo con un tema scuro, con una barra laterale e un'area di contenuto principale. Utilizza una combinazione di colori triadica per l'appeal visivo.
Memphis_Grayscale_Photography_Layout
Un componente di layout fotografico complesso e reattivo ispirato a Memphis Design in scala di grigi, adatto per gallerie fotografiche e portfolio, con supporto per la modalità scura.
Componente Componenti di layout
Un componente di layout reattivo che mostra le microinterazioni attraverso animazioni coinvolgenti che rispondono alle azioni dell'utente, con supporto per la modalità oscura e l'utilizzo di Tailwind CSS.