Componente Componenti di layout
Un componente di layout progettato in uno stile scheumorfico che imita le controparti del mondo reale, con elementi reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
<header class="bg-white dark:bg-gray-800 shadow-md flex justify-between items-center p-4 rounded-lg">
<h1 class="text-xl font-bold text-gray-800 dark:text-white">My Skeuomorphic Layout</h1>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700">
</header>
<main class="flex-grow p-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transition-all transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Placeholder" class="w-full h-32 object-cover mb-2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">This is a brief description of the card content. It mimics a real-world element.</p>
</div>
</div>
</main>
<footer class="bg-white dark:bg-gray-800 shadow-md p-4 text-center rounded-lg">
<p class="text-gray-600 dark:text-gray-400">© 2023 My Company. All rights reserved.</p>
</footer>
</div>Componenti correlati
Componente Layout Social Media
Un componente di layout per social media reattivo e complesso ispirato al 3D con colori vivaci e supporto per temi scuri utilizzando Tailwind CSS. Include un'intestazione con un logo e una navigazione, un'area di contenuto principale con schede dinamiche per i post e una barra laterale per i profili utente e gli argomenti di tendenza. Ogni elemento è progettato per dare un senso di profondità e interazione.
Layout del portfolio di neumorfismo
Un layout di neumorfismo semplice e reattivo per un portfolio, che supporta la modalità scura.
Layout del cruscotto di Glassmorphism
Un semplice layout di vetromorfismo per un cruscotto con elementi traslucidi simili al vetro smerigliato, con una combinazione di colori pastello e il supporto della modalità scura.