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
Retro_Jewel_Tone_Entertainment_Layout
Un componente di layout di moderata complessità ispirato al retrò/vintage per piattaforme di intrattenimento, caratterizzato da toni ricchi di gioielli e piena reattività con supporto per la modalità oscura.
RetroBusinessLayout
Un componente di layout a tema retrò/vintage per siti Web aziendali, caratterizzato da una combinazione di colori in scala di grigi e un design semplice. È reattivo e include il supporto per la modalità oscura.
Cyberpunk Crypto Dashboard Layout
Un layout di dashboard reattivo a tema cyberpunk per applicazioni di criptovaluta e blockchain, con accenti al neon, sfondi scuri e colori tenui. Include la navigazione nella barra laterale, un'area di contenuto principale e una barra superiore.