Componenti di layout
Un componente di layout complesso progettato per i blog e il consumo di contenuti, caratterizzato da microinterazioni e una combinazione di colori complementari. Include vari elementi interattivi e supporta la modalità oscura.
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen">
<header class="bg-blue-500 dark:bg-blue-700 p-4 shadow-md transition-colors duration-300">
<h1 class="text-white text-2xl font-bold">My Blog</h1>
<nav class="mt-2">
<ul class="flex space-x-4">
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Home</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">About</a></li>
<li><a href="#" class="text-white hover:text-blue-300 transition duration-200">Contact</a></li>
</ul>
</nav>
</header>
<main class="py-10 px-4 sm:px-8 lg:px-16">
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a brief description of the blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?2" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is another brief description. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
<article class="bg-white dark:bg-gray-900 rounded-lg p-5 shadow-md transition-transform duration-300 transform hover:scale-105">
<img src="https://picsum.photos/400/200?3" alt="Blog Post" class="rounded-t-lg w-full">
<h2 class="text-xl font-semibold mt-3">Yet Another Blog Post Title</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">Description of yet another blog post. Click to read more...</p>
<button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded hover:bg-blue-400 dark:hover:bg-blue-600 transition duration-200">Read More</button>
</article>
</section>
</main>
<footer class="bg-blue-500 dark:bg-blue-700 p-4 text-center text-white">
<p>© 2023 My Blog</p>
</footer>
</div>Componenti correlati
Componente Layout 3D
Un componente di layout per social media 3D Design reattivo con una combinazione di colori in scala di grigi. Adatto per interfacce di social networking.
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.
Componente del layout del dashboard per la consegna di cibo
Un layout complesso e reattivo del dashboard per la consegna di cibo con un'interfaccia utente scura e una combinazione di colori di caramelle/dolci, con una barra laterale, un'intestazione, un'area di contenuto principale e più elementi interattivi per un'applicazione di cibo/ristorante. Include il supporto per la modalità oscura.