Composants de mise en page
Il s’agit d’un composant de mise en page complexe conçu pour les blogs et la consommation de contenu, avec des micro-interactions et une palette de couleurs complémentaires. Il comprend divers éléments interactifs et prend en charge le mode sombre.
HTML Code
<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>Composants associés
Composant Composants de mise en page
Un composant de mise en page inspiré du brutalisme pour la consommation de contenu avec une palette de couleurs pastel et une complexité modérée, avec un design réactif et une prise en charge du mode sombre.
Présentation du portefeuille Neumorphism
Une mise en page Neumorphism simple et réactive pour un portfolio, prenant en charge le mode sombre.
Retro_Jewel_Tone_Entertainment_Layout
Un composant de mise en page d’inspiration rétro/vintage de complexité modérée pour les plates-formes de divertissement, avec des tons de bijoux riches et une réactivité totale avec la prise en charge du mode sombre.