RetroBlog Layout
Un layout del blog semplice e reattivo con un'estetica retrò/vintage, supporto per la modalità oscura e una combinazione di colori complementare, costruita con Tailwind CSS.
Codice HTML
<div class="min-h-screen bg-gray-200 font-sans text-gray-800 dark:bg-gray-900 dark:text-gray-200">
<header class="bg-blue-600 py-4 shadow-md dark:bg-blue-800">
<div class="container mx-auto px-4">
<h1 class="text-center text-3xl font-bold text-white">RetroBlog</h1>
</div>
</header>
<main class="container mx-auto p-4">
<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
<!-- Main Content Area -->
<section class="md:col-span-2">
<article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
<h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Blog Post Title</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 27, 2023</p>
<img src="https://picsum.photos/seed/retro1/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
<p class="text-gray-700 dark:text-gray-300">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</article>
<article class="mb-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
<h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100">Another Blog Post</h2>
<p class="mb-4 text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
<img src="https://picsum.photos/seed/retro2/800/400" alt="Blog Post Image" class="mb-4 w-full rounded-md">
<p class="text-gray-700 dark:text-gray-300">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</section>
<!-- Sidebar -->
<aside>
<div class="rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">About</h3>
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar" class="mb-4 w-16 h-16 rounded-full mx-auto">
<p class="text-gray-700 text-center dark:text-gray-300">A passionate writer sharing thoughts and ideas on various topics.</p>
</div>
<div class="mt-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-800">
<h3 class="mb-4 text-lg font-bold text-gray-900 dark:text-gray-100">Categories</h3>
<ul>
<li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Technology</a></li>
<li class="mb-2"><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Lifestyle</a></li>
<li><a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Travel</a></li>
</ul>
</div>
</aside>
</div>
</main>
<footer class="bg-gray-700 py-4 text-center text-white dark:bg-gray-900">
<p>© 2023 RetroBlog. All rights reserved.</p>
</footer>
</div>Componenti correlati
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.
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.
Componente Layout dashboard
Un layout di dashboard reattivo con un'estetica Material Design, che include una barra laterale, un'intestazione e un'area di contenuto principale. Supporta la modalità oscura e utilizza colori complementari per un aspetto equilibrato. La complessità è moderata con funzionalità di tipo interattivo ottenute esclusivamente con le classi CSS e Tailwind.